Remember to run Prettier, even when it has precommit hook

integration_tests/pages/LoginPage.ts

@@ -4,6 +4,7 @@ export class LoginPage extends BasePage {
   email = this.page.getByTestId("email");
   password = this.page.getByTestId("password");
   loginBtn = this.page.getByTestId("loginBtn");
-  showPasswordBtn = this.page.locator("[aria-label='toggle password visibility']");
+  showPasswordBtn = this.page.locator(
+    "[aria-label='toggle password visibility']",
+  );
 }
-

integration_tests/test/login.spec.ts

@@ -24,8 +24,8 @@ test("show and hide password", async ({ loginPage }) => {
   await loginPage.password.type("123456");
 
   await loginPage.showPasswordBtn.click();
-  expect(await loginPage.password.getAttribute('type')).toBe('text');
+  expect(await loginPage.password.getAttribute("type")).toBe("text");
 
   await loginPage.showPasswordBtn.click();
-  expect(await loginPage.password.getAttribute('type')).toBe('password');
-});
+  expect(await loginPage.password.getAttribute("type")).toBe("password");
+});

src/components/BuildList/index.tsx

@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from "react";
-import { makeStyles, createStyles } from '@mui/styles';
+import { makeStyles, createStyles } from "@mui/styles";
 import {
   List,
   ListItemButton,

src/components/CommentsPopper.tsx

@@ -1,6 +1,14 @@
 import React from "react";
-import { makeStyles } from '@mui/styles';
-import { Button, Popper, Fade, Paper, TextField, Badge, type Theme } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+import {
+  Button,
+  Popper,
+  Fade,
+  Paper,
+  TextField,
+  Badge,
+  type Theme,
+} from "@mui/material";
 import {
   usePopupState,
   bindToggle,
@@ -16,7 +24,6 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
-
 interface IProps {
   text: string | undefined;
   onSave: (comment: string) => Promise<void | string | number>;

src/components/LoginForm.tsx

@@ -63,10 +63,7 @@ const LoginForm = () => {
             </Grid>
 
             <Grid item>
-              <PasswordField
-                password={password}
-                setPassword={setPassword}
-              />
+              <PasswordField password={password} setPassword={setPassword} />
             </Grid>
           </Grid>
         </CardContent>

src/components/PasswordField.tsx

@@ -1,18 +1,19 @@
 import React, { useState } from "react";
-import {
-  IconButton,
-  InputAdornment,
-} from "@mui/material";
+import { IconButton, InputAdornment } from "@mui/material";
 import { Visibility, VisibilityOff } from "@mui/icons-material";
 import { TextValidator } from "react-material-ui-form-validator";
 
 interface PasswordFieldProps {
-    password: string;
-    setPassword: React.Dispatch<React.SetStateAction<string>>;
-    label?: string;
+  password: string;
+  setPassword: React.Dispatch<React.SetStateAction<string>>;
+  label?: string;
 }
 
-const PasswordField = ({password, setPassword, label = "Password" }: PasswordFieldProps) => {
+const PasswordField = ({
+  password,
+  setPassword,
+  label = "Password",
+}: PasswordFieldProps) => {
   const [showPassword, setShowPassword] = useState<boolean>(false);
 
   const handleClickShowPassword = () => setShowPassword((show) => !show);

src/components/ProjectSelect.tsx

@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from "react";
-import { makeStyles, createStyles } from '@mui/styles';
+import { makeStyles, createStyles } from "@mui/styles";
 import {
   FormControl,
   InputLabel,

src/components/RegisterForm.tsx

@@ -1,11 +1,5 @@
 import React, { useState, FormEvent } from "react";
-import {
-  Button,
-  Grid,
-  Card,
-  CardContent,
-  CardActions,
-} from "@mui/material";
+import { Button, Grid, Card, CardContent, CardActions } from "@mui/material";
 import { useUserDispatch, login } from "../contexts";
 import { usersService } from "../services";
 import { useSnackbar } from "notistack";
@@ -39,7 +33,7 @@ const RegisterForm = () => {
         }),
       );
   };
-  
+
   const errorForTwoChar = "Enter at least two characters.";
 
   return (
@@ -105,10 +99,7 @@ const RegisterForm = () => {
               />
             </Grid>
             <Grid item>
-              <PasswordField
-                password={password}
-                setPassword={setPassword}
-              />
+              <PasswordField password={password} setPassword={setPassword} />
             </Grid>
           </Grid>
         </CardContent>

src/components/TestDetailsDialog/DrawArea.tsx

@@ -339,9 +339,5 @@ export const DrawArea: FunctionComponent<IDrawArea> = ({
   );
 
   // TODO: Separate SVG with reason...
-  return (
-    <>
-      {imageName ? imageCanvas() : <NoImagePlaceholder />}
-    </>
-  );
+  return <>{imageName ? imageCanvas() : <NoImagePlaceholder />}</>;
 };

src/components/TestDetailsDialog/TestDetailsModal.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { makeStyles } from '@mui/styles';
+import { makeStyles } from "@mui/styles";
 import {
   Typography,
   Button,
@@ -603,11 +603,7 @@ const TestDetailsModal: React.FunctionComponent<TestDetailsModalProps> = ({
           <TestStatusChip status={testRun.status} />
         </Grid>
         <Grid item className={classes.closeIcon}>
-          <IconButton
-            color="inherit"
-            onClick={handleClose}
-            size="large"
-          >
+          <IconButton color="inherit" onClick={handleClose} size="large">
             <Close />
           </IconButton>
         </Grid>

src/components/TestDetailsDialog/index.tsx

@@ -28,13 +28,14 @@ export const TestDetailsDialog: React.FunctionComponent = () => {
   const [navigationTargetId, setNavigationTargetId] = React.useState<string>();
 
   const testRuns = React.useMemo(() => {
-    if(filteredSortedTestRunIds) {
+    if (filteredSortedTestRunIds) {
       return allTestRuns
-      .filter((tr) => filteredSortedTestRunIds.includes(tr.id))
-      .sort(
-        (a, b) =>
-        filteredSortedTestRunIds.indexOf(a.id) - filteredSortedTestRunIds.indexOf(b.id),
-      )
+        .filter((tr) => filteredSortedTestRunIds.includes(tr.id))
+        .sort(
+          (a, b) =>
+            filteredSortedTestRunIds.indexOf(a.id) -
+            filteredSortedTestRunIds.indexOf(b.id),
+        );
     }
     return allTestRuns;
   }, [allTestRuns, filteredSortedTestRunIds]);

src/components/TestRunList/StatusFilterOperators.tsx

@@ -11,11 +11,14 @@ import {
   GridFilterItem,
   GridCellParams,
   GridFilterOperator,
-  GridFilterInputValueProps
+  GridFilterInputValueProps,
 } from "@mui/x-data-grid";
 import { TestStatus } from "../../types";
 
-const StatusInputComponent = ({ item, applyValue }: GridFilterInputValueProps) => {
+const StatusInputComponent = ({
+  item,
+  applyValue,
+}: GridFilterInputValueProps) => {
   const { testRuns } = useTestRunState();
 
   const handleFilterChange = (event: SelectChangeEvent<HTMLSelectElement>) => {
@@ -52,7 +55,7 @@ const StatusInputComponent = ({ item, applyValue }: GridFilterInputValueProps) =
     </FormControl>
   );
 };
-export const StatusFilterOperators: GridFilterOperator[]  = [
+export const StatusFilterOperators: GridFilterOperator[] = [
   ...getGridStringOperators()
     .filter((operator) => operator.value === "equals")
     .map((operator) => ({

src/components/TestRunList/TagFilterOperators.tsx

@@ -6,7 +6,11 @@ import {
 } from "@mui/material";
 import React from "react";
 import { useTestRunState } from "../../contexts";
-import { getGridStringOperators, GridFilterOperator, GridFilterInputValueProps } from "@mui/x-data-grid";
+import {
+  getGridStringOperators,
+  GridFilterOperator,
+  GridFilterInputValueProps,
+} from "@mui/x-data-grid";
 
 const TagInputComponent = ({ item, applyValue }: GridFilterInputValueProps) => {
   const { testRuns } = useTestRunState();

src/components/TestRunList/index.tsx

@@ -53,7 +53,7 @@ const columnsDef: GridColDef[] = [
 
       return tags.reduce(
         (prev, curr) => prev.concat(curr ? `${curr};` : ""),
-        ""
+        "",
       );
     },
     renderCell: (params: GridCellParams) => (
@@ -72,7 +72,7 @@ const columnsDef: GridColDef[] = [
                     margin: "1px",
                   }}
                 />
-              )
+              ),
           )}
       </React.Fragment>
     ),
@@ -124,12 +124,12 @@ const TestRunList: React.FunctionComponent = () => {
           testRunDispatch({
             type: "get",
             payload,
-          })
+          }),
         )
         .catch((err: string) =>
           enqueueSnackbar(err, {
             variant: "error",
-          })
+          }),
         );
     } else {
       testRunDispatch({
@@ -161,8 +161,8 @@ const TestRunList: React.FunctionComponent = () => {
       () =>
         (unsubscribe = apiRef.current.subscribeEvent(
           "stateChange",
-          handleStateChange
-        ))
+          handleStateChange,
+        )),
     );
   }, [apiRef, apiRef.current.instanceId]);
 
@@ -192,7 +192,10 @@ const TestRunList: React.FunctionComponent = () => {
           onSortModelChange={(model) => setSortModel(model)}
           onRowClick={(param: GridRowParams) => {
             navigate(
-              buildTestRunLocation(selectedBuild.id, param.row["id"].toString())
+              buildTestRunLocation(
+                selectedBuild.id,
+                param.row["id"].toString(),
+              ),
             );
           }}
         />

src/components/UserList/index.tsx

@@ -61,7 +61,7 @@ const UserList = () => {
       userDispatch({
         type: "getAll",
         payload: users,
-      })
+      }),
     );
   }, [userDispatch]);
 
@@ -78,12 +78,12 @@ const UserList = () => {
           .catch((err) =>
             enqueueSnackbar(err, {
               variant: "error",
-            })
+            }),
           );
       }
       return newState;
     },
-    [enqueueSnackbar]
+    [enqueueSnackbar],
   );
 
   const apiRef = useGridApiRef();

src/contexts/testRun.context.tsx

@@ -79,7 +79,7 @@ type TestRunProviderProps = {
 
 const TestRunStateContext = React.createContext<State | undefined>(undefined);
 const TestRunDispatchContext = React.createContext<Dispatch | undefined>(
-  undefined
+  undefined,
 );
 
 const initialState: State = {
@@ -130,7 +130,7 @@ function testRunReducer(state: State, action: IAction): State {
           ...state.testRuns,
           ...action.payload.filter(
             // remove duplicates
-            (i) => !state.testRuns.find((tr) => tr.id === i.id)
+            (i) => !state.testRuns.find((tr) => tr.id === i.id),
           ),
         ],
       };

src/pages/ProjectPage.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { makeStyles } from '@mui/styles';
+import { makeStyles } from "@mui/styles";
 import { Grid, Box } from "@mui/material";
 import { useParams, useNavigate } from "react-router-dom";
 import BuildList from "../components/BuildList";
@@ -22,7 +22,6 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-
 const ProjectPage = () => {
   const classes = useStyles();
   const { projectId } = useParams<{ projectId: string }>();

src/pages/TestVariationDetailsPage.tsx

@@ -47,7 +47,7 @@ const TestVariationDetailsPage: React.FunctionComponent = () => {
         .catch((err) =>
           enqueueSnackbar(err, {
             variant: "error",
-          })
+          }),
         );
     }
   }, [testVariationId, enqueueSnackbar]);
@@ -72,11 +72,11 @@ const TestVariationDetailsPage: React.FunctionComponent = () => {
                         if (testRun) {
                           navigate({
                             pathname: buildProjectPageUrl(
-                              testVariation.projectId
+                              testVariation.projectId,
                             ),
                             ...buildTestRunLocation(
                               testRun.buildId,
-                              testRun.id
+                              testRun.id,
                             ),
                           });
                         }