build: backport of #605

Update packages to remove security vulnerabilities (#605)

* fix: updated vulnerable packages

* fix: fixed failed tests after package update

* fix: linting issues failing ci tests

* fix: package lock update

* fix: snapshot updated to UTC

* fix: missing dependency 'long'

package.json

@@ -15,7 +15,7 @@
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "fedx-scripts jest --coverage --passWithNoTests"
+    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests"
   },
   "bugs": {
     "url": "https://github.com/edx/frontend-app-account/issues"
@@ -40,8 +40,8 @@
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/react-fontawesome": "0.1.16",
     "@tensorflow-models/blazeface": "0.0.7",
-    "@tensorflow/tfjs-converter": "3.11.0",
-    "@tensorflow/tfjs-core": "3.11.0",
+    "@tensorflow/tfjs-converter": "3.18.0",
+    "@tensorflow/tfjs-core": "3.18.0",
     "bowser": "2.11.0",
     "classnames": "2.3.1",
     "core-js": "3.19.3",
@@ -59,6 +59,7 @@
     "lodash.omit": "4.5.0",
     "lodash.pick": "4.4.0",
     "lodash.pickby": "4.6.0",
+    "long": "^5.2.0",
     "memoize-one": "5.2.1",
     "prop-types": "15.7.2",
     "qs": "6.10.3",

src/account-settings/certificate-preference/CertificatePreference.jsx

@@ -29,11 +29,6 @@ function CertificatePreference({
   saveState,
   useVerifiedNameForCerts,
 }) {
-  if (!originalVerifiedName) {
-    // If the user doesn't have an approved verified name, do not display this component
-    return null;
-  }
-
   const dispatch = useDispatch();
   const [checked, setChecked] = useState(false);
   const [modalIsOpen, setModalIsOpen] = useState(false);
@@ -75,21 +70,27 @@ function CertificatePreference({
   }
 
   useEffect(() => {
-    if (fieldName === 'verified_name') {
-      setChecked(useVerifiedNameForCerts);
-    } else {
-      setChecked(!useVerifiedNameForCerts);
+    if (originalVerifiedName) {
+      if (fieldName === 'verified_name') {
+        setChecked(useVerifiedNameForCerts);
+      } else {
+        setChecked(!useVerifiedNameForCerts);
+      }
     }
-  }, [useVerifiedNameForCerts]);
+  }, [originalVerifiedName, fieldName, useVerifiedNameForCerts]);
 
   useEffect(() => {
-    if (modalIsOpen && saveState === 'complete') {
-      setModalIsOpen(false);
-      dispatch(closeForm(fieldName));
+    if (originalVerifiedName) {
+      if (modalIsOpen && saveState === 'complete') {
+        setModalIsOpen(false);
+        dispatch(closeForm(fieldName));
+      }
     }
-  }, [modalIsOpen, saveState]);
+  }, [dispatch, originalVerifiedName, fieldName, modalIsOpen, saveState]);
+
+  // If the user doesn't have an approved verified name, do not display this component
 
-  return (
+  return originalVerifiedName ? (
     <>
       <Form.Checkbox className="mt-1 mb-4" checked={checked} onChange={handleCheckboxChange}>
         {intl.formatMessage(messages['account.settings.field.name.checkbox.certificate.select'])}
@@ -150,7 +151,7 @@ function CertificatePreference({
         </Form>
       </ModalDialog>
     </>
-  );
+  ) : null;
 }
 
 CertificatePreference.propTypes = {

src/account-settings/delete-account/__snapshots__/ConfirmationModal.test.jsx.snap

@@ -386,16 +386,14 @@ Array [
             "width": "1px",
           }
         }
-        tabIndex={0}
+        tabIndex={-1}
       />
       <div
-        data-focus-lock-disabled={false}
+        data-focus-lock-disabled="disabled"
         onBlur={[Function]}
         onFocus={[Function]}
-        onMouseDown={[Function]}
         onScrollCapture={[Function]}
         onTouchMoveCapture={[Function]}
-        onTouchStart={[Function]}
         onWheelCapture={[Function]}
       >
         <div
@@ -513,7 +511,7 @@ Array [
             "width": "1px",
           }
         }
-        tabIndex={0}
+        tabIndex={-1}
       />
     </div>
   </div>,

src/account-settings/delete-account/__snapshots__/SuccessModal.test.jsx.snap

@@ -417,16 +417,14 @@ Array [
             "width": "1px",
           }
         }
-        tabIndex={0}
+        tabIndex={-1}
       />
       <div
-        data-focus-lock-disabled={false}
+        data-focus-lock-disabled="disabled"
         onBlur={[Function]}
         onFocus={[Function]}
-        onMouseDown={[Function]}
         onScrollCapture={[Function]}
         onTouchMoveCapture={[Function]}
-        onTouchStart={[Function]}
         onWheelCapture={[Function]}
       >
         <div
@@ -480,7 +478,7 @@ Array [
             "width": "1px",
           }
         }
-        tabIndex={0}
+        tabIndex={-1}
       />
     </div>
   </div>,

src/account-settings/demographics/Checkboxes.jsx

@@ -14,7 +14,7 @@ const Checkboxes = (props) => {
   const [selected, setSelected] = useState(values);
   useEffect(() => {
     onChange(id, selected);
-  }, [selected]);
+  }, [id, onChange, selected]);
 
   const handleToggle = (value, option) => {
     // If the user checked 'declined', uncheck all other options

src/account-settings/name-change/NameChange.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { connect, useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
@@ -34,20 +34,20 @@ function NameChangeModal({
   const [verifiedNameInput, setVerifiedNameInput] = useState(formValues.verified_name || '');
   const [confirmedWarning, setConfirmedWarning] = useState(false);
 
-  function resetLocalState() {
+  const resetLocalState = useCallback(() => {
     setConfirmedWarning(false);
     dispatch(requestNameChangeReset());
-  }
+  }, [dispatch]);
 
   function handleChange(e) {
     setVerifiedNameInput(e.target.value);
   }
 
-  function handleClose() {
+  const handleClose = useCallback(() => {
     resetLocalState();
     dispatch(closeForm(targetFormId));
     dispatch(saveSettingsReset());
-  }
+  }, [dispatch, resetLocalState, targetFormId]);
 
   function handleSubmit(e) {
     e.preventDefault();
@@ -71,7 +71,7 @@ function NameChangeModal({
       handleClose();
       push(`/id-verification?next=${encodeURIComponent('account/settings')}`);
     }
-  }, [saveState]);
+  }, [handleClose, push, saveState]);
 
   function renderErrors() {
     if (Object.keys(errors).length > 0) {

src/id-verification/ImageFileUpload.jsx

@@ -31,7 +31,7 @@ export default function ImageFileUpload({ onFileChange, intl }) {
       });
       fileReader.readAsDataURL(fileObject);
     }
-  }, []);
+  }, [errorTypes.fileTooLarge, errorTypes.invalidFileType, onFileChange]);
 
   return (
     <>

src/id-verification/panels/BasePanel.jsx

@@ -16,7 +16,7 @@ export default function BasePanel({
     if (focusOnMount && headingRef.current) {
       headingRef.current.focus();
     }
-  }, [headingRef.current]);
+  }, [focusOnMount]);
 
   const redirectSlug = useVerificationRedirectSlug(name);
   if (redirectSlug) {

src/id-verification/panels/GetNameIdPanel.jsx

@@ -28,7 +28,7 @@ function GetNameIdPanel(props) {
     if (location.state?.fromSummary && nameInputRef.current) {
       nameInputRef.current.focus();
     }
-  }, []);
+  }, [idPhotoName, location.state, nameOnAccountValue, setIdPhotoName]);
 
   function handleSubmit(e) {
     e.preventDefault();

src/id-verification/panels/SummaryPanel.jsx

@@ -32,7 +32,7 @@ function SummaryPanel(props) {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [submissionError, setSubmissionError] = useState(null);
 
-  useEffect(() => setReachedSummary(true), []);
+  useEffect(() => setReachedSummary(true), [setReachedSummary]);
 
   function renderManagedProfileMessage() {
     if (!profileDataManager) {