fix: ORV2-1808 Many Sonarcloud fixes (#965)

bcgov · Dec 26, 2023 · 67ffdbc · 67ffdbc
1 parent cd39a96
commit 67ffdbc
Show file tree

Hide file tree

Showing 22 changed files with 135 additions and 208 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -110,7 +110,11 @@ const App = () => {
               migratedClient,
             ])}
           >
-            <SnackBarContext.Provider value={{ setSnackBar: setSnackBar }}>
+            <SnackBarContext.Provider
+              value={useMemo(() => {
+                return { setSnackBar: setSnackBar };
+              }, [setSnackBar])}
+            >
               <CustomSnackbar
                 showSnackbar={displaySnackBar}
                 setShowSnackbar={setDisplaySnackBar}

diff --git a/frontend/src/common/components/form/CustomFormComponents.tsx b/frontend/src/common/components/form/CustomFormComponents.tsx
@@ -179,40 +179,38 @@ export const CustomFormComponent = <T extends ORBC_FormTypes>({
         control={control}
         rules={rules}
         render={({ fieldState: { invalid } }) => (
-          <>
-            <FormControl
-              className="custom-form-control"
-              margin="normal"
-              error={invalid}
-              sx={{ width: "100%" }}
+          <FormControl
+            className="custom-form-control"
+            margin="normal"
+            error={invalid}
+            sx={{ width: "100%" }}
+          >
+            <FormLabel
+              className="custom-form-control__label"
+              id={`${feature}-${name}-label`}
+              sx={{ fontWeight: "bold", marginBottom: "8px" }}
             >
-              <FormLabel
-                className="custom-form-control__label"
-                id={`${feature}-${name}-label`}
-                sx={{ fontWeight: "bold", marginBottom: "8px" }}
-              >
-                {label}
-                {!isRequired() && (
-                  <span style={{ fontWeight: "normal" }}> (optional)</span>
-                )}
-                {customHelperText && (
-                  <span style={{ fontWeight: "normal" }}>
-                    {` (${customHelperText})`}
-                  </span>
-                )}
-              </FormLabel>
-              {renderSubFormComponent(invalid)}
-              {invalid && (
-                <FormHelperText
-                  className="custom-form-control__helper-text"
-                  data-testid={`alert-${name}`}
-                  error
-                >
-                  {getErrorMessage(errors, name)}
-                </FormHelperText>
+              {label}
+              {!isRequired() && (
+                <span style={{ fontWeight: "normal" }}> (optional)</span>
+              )}
+              {customHelperText && (
+                <span style={{ fontWeight: "normal" }}>
+                  {` (${customHelperText})`}
+                </span>
               )}
-            </FormControl>
-          </>
+            </FormLabel>
+            {renderSubFormComponent(invalid)}
+            {invalid && (
+              <FormHelperText
+                className="custom-form-control__helper-text"
+                data-testid={`alert-${name}`}
+                error
+              >
+                {getErrorMessage(errors, name)}
+              </FormHelperText>
+            )}
+          </FormControl>
         )}
       />
     </Box>

diff --git a/frontend/src/common/components/form/subFormComponents/CustomCheckbox.tsx b/frontend/src/common/components/form/subFormComponents/CustomCheckbox.tsx
@@ -37,20 +37,18 @@ export const CustomCheckbox = <T extends ORBC_FormTypes>(
       name={props.name}
       control={control}
       render={() => (
-        <>
-          <FormControl>
-            <div>
-              <Checkbox
-                {...register(props.name)}
-                checked={props.checked}
-                onChange={props.handleOnChange}
-                inputProps={props.inputProps}
-                sx={{ marginLeft: "0px", paddingLeft: "0px" }}
-              />
-              <FormLabel>{props.label}</FormLabel>
-            </div>
-          </FormControl>
-        </>
+        <FormControl>
+          <div>
+            <Checkbox
+              {...register(props.name)}
+              checked={props.checked}
+              onChange={props.handleOnChange}
+              inputProps={props.inputProps}
+              sx={{ marginLeft: "0px", paddingLeft: "0px" }}
+            />
+            <FormLabel>{props.label}</FormLabel>
+          </div>
+        </FormControl>
       )}
     />
   );

diff --git a/frontend/src/common/components/form/subFormComponents/CustomDatePicker.tsx b/frontend/src/common/components/form/subFormComponents/CustomDatePicker.tsx
@@ -38,9 +38,12 @@ export interface CustomDatePickerProps<T extends FieldValues> {
  * Based on https://mui.com/x/react-date-pickers/date-picker/
  *
  */
-export const CustomDatePicker = <T extends ORBC_FormTypes>(
-  props: CustomDatePickerProps<T>,
-): JSX.Element => {
+export const CustomDatePicker = <T extends ORBC_FormTypes>({
+  feature,
+  name,
+  disabled,
+  readOnly,
+}: CustomDatePickerProps<T>): JSX.Element => {
   const {
     trigger,
     formState: { isSubmitted },
@@ -57,7 +60,6 @@ export const CustomDatePicker = <T extends ORBC_FormTypes>(
    * There may be a better solution.
    * Referenced: https://www.reddit.com/r/reactjs/comments/udzhh7/reacthookform_not_working_with_mui_datepicker/
    */
-  const name: FieldPath<T> = props.name;
   const {
     field: { onChange, value, ref },
   } = useController({ name, control });
@@ -69,11 +71,12 @@ export const CustomDatePicker = <T extends ORBC_FormTypes>(
    * Reference: https://mui.com/x/react-date-pickers/validation/#show-the-error
    */
   const { setError, clearErrors } = useFormContext();
-  const [MUIerror, setMUIError] = useState<RequiredOrNull<DateValidationError>>(null);
+  const [muiError, setMuiError] =
+    useState<RequiredOrNull<DateValidationError>>(null);
   const [errorMessage, setErrorMessage] = useState("");
 
   useEffect(() => {
-    switch (MUIerror) {
+    switch (muiError) {
       case "minDate":
       case "disablePast": {
         setError(name, { type: "focus" }, { shouldFocus: true });
@@ -96,19 +99,20 @@ export const CustomDatePicker = <T extends ORBC_FormTypes>(
         break;
       }
     }
-  }, [MUIerror]);
+  }, [muiError]);
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DatePicker
+        key={`${feature}-date-picker`}
         ref={ref}
         value={value}
-        disabled={props.disabled}
-        readOnly={props.readOnly}
+        disabled={disabled}
+        readOnly={readOnly}
         onChange={onChange}
         disablePast
         maxDate={maxDate}
-        onError={(newError) => setMUIError(newError)}
+        onError={(newError) => setMuiError(newError)}
         slotProps={{
           textField: {
             helperText: errorMessage,
@@ -119,9 +123,9 @@ export const CustomDatePicker = <T extends ORBC_FormTypes>(
         // The validation needed to be triggered again manually
         onClose={async () => {
           if (isSubmitted) {
-            const output = await trigger(props.name);
+            const output = await trigger(name);
             if (!output) {
-              trigger(props.name);
+              trigger(name);
             }
           }
         }}

diff --git a/frontend/src/common/components/header/Header.tsx b/frontend/src/common/components/header/Header.tsx
@@ -14,10 +14,10 @@ import { SearchButton } from "./components/SearchButton";
 import { SearchFilter } from "./components/SearchFilter";
 import { IDPS } from "../../types/idp";
 import OnRouteBCContext from "../../authentication/OnRouteBCContext";
-import { 
-  APPLICATIONS_ROUTES, 
-  PROFILE_ROUTES, 
-  VEHICLES_ROUTES, 
+import {
+  APPLICATIONS_ROUTES,
+  PROFILE_ROUTES,
+  VEHICLES_ROUTES,
 } from "../../../routes/constants";
 
 const getEnv = () => {
@@ -56,9 +56,7 @@ const Navbar = ({
             <>
               {DoesUserHaveRoleWithContext(ROLES.WRITE_PERMIT) && (
                 <li>
-                  <NavLink to={APPLICATIONS_ROUTES.BASE}>
-                    Permits
-                  </NavLink>
+                  <NavLink to={APPLICATIONS_ROUTES.BASE}>Permits</NavLink>
                 </li>
               )}
               {DoesUserHaveRoleWithContext(ROLES.READ_VEHICLE) && (
@@ -70,9 +68,7 @@ const Navbar = ({
               )}
               {DoesUserHaveRoleWithContext(ROLES.READ_ORG) && (
                 <li>
-                  <NavLink to={PROFILE_ROUTES.MANAGE}>
-                    Profile
-                  </NavLink>
+                  <NavLink to={PROFILE_ROUTES.MANAGE}>Profile</NavLink>
                 </li>
               )}
             </>
@@ -83,6 +79,17 @@ const Navbar = ({
   );
 };
 
+/**
+ * Navigation button react component.
+ */
+const NavButton = ({ toggleMenu }: { toggleMenu: () => void }) => (
+  <div className="other">
+    <a className="nav-btn" onClick={toggleMenu} onKeyDown={toggleMenu}>
+      <FontAwesomeIcon id="menu" className="menu-icon" icon={faBars} />
+    </a>
+  </div>
+);
+
 /*
  * The Header component includes the BC Gov banner and Navigation bar
  * and is responsive for mobile
@@ -112,14 +119,6 @@ export const Header = () => {
     setMenuOpen(false);
   };
 
-  const NavButton = () => (
-    <div className="other">
-      <a className="nav-btn" onClick={toggleMenu}>
-        <FontAwesomeIcon id="menu" className="menu-icon" icon={faBars} />
-      </a>
-    </div>
-  );
-
   return (
     <div className="header">
       <header
@@ -136,12 +135,10 @@ export const Header = () => {
               <UserSection username={username} />
             </div>
           ) : null}
-          {isAuthenticated ? <NavButton /> : null}
+          {isAuthenticated ? <NavButton toggleMenu={toggleMenu} /> : null}
         </div>
       </header>
-      {shouldDisplayNavBar && (
-        <Navbar isAuthenticated={isAuthenticated} />
-      )}
+      {shouldDisplayNavBar && <Navbar isAuthenticated={isAuthenticated} />}
       {shouldDisplayNavBar && menuOpen ? (
         <Navbar isAuthenticated={isAuthenticated} isMobile={true} />
       ) : null}

diff --git a/frontend/src/common/components/table/NoRecordsFound.tsx b/frontend/src/common/components/table/NoRecordsFound.tsx
@@ -9,6 +9,7 @@ export const NoRecordsFound = memo(() => {
         <img
           src="No_Data_Graphic.svg"
           className="no-records-found__img"
+          alt="No Data Graphic"
         />
       </div>
       <div className="no-records-found__section no-records-found__section--msg">

diff --git a/frontend/src/common/components/table/OnRouteBCTableRowActions.tsx b/frontend/src/common/components/table/OnRouteBCTableRowActions.tsx
@@ -77,10 +77,12 @@ export const OnRouteBCTableRowActions = ({
         anchorEl={anchorEl}
         open={open}
         onClose={handleClose}
-        PaperProps={{
-          style: {
-            maxHeight: ITEM_HEIGHT * 4.5,
-            width: "15ch",
+        slotProps={{
+          paper: {
+            style: {
+              maxHeight: ITEM_HEIGHT * 4.5,
+              width: "15ch",
+            },
           },
         }}
       >

diff --git a/frontend/src/features/homePage/HomePage.tsx b/frontend/src/features/homePage/HomePage.tsx