refactor: add useEnqueueSnackbar with data-test attr

packages/web/package.json

@@ -31,7 +31,7 @@
     "lodash": "^4.17.21",
     "luxon": "^2.3.1",
     "mui-color-input": "^2.0.0",
-    "notistack": "^2.0.2",
+    "notistack": "^3.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.45.2",

packages/web/src/components/ApolloProvider/index.tsx

@@ -1,16 +1,16 @@
-import * as React from 'react';
 import { ApolloProvider as BaseApolloProvider } from '@apollo/client';
-import { useSnackbar } from 'notistack';
+import * as React from 'react';
 
 import { mutateAndGetClient } from 'graphql/client';
 import useAuthentication from 'hooks/useAuthentication';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 
 type ApolloProviderProps = {
   children: React.ReactNode;
 };
 
 const ApolloProvider = (props: ApolloProviderProps): React.ReactElement => {
-  const { enqueueSnackbar } = useSnackbar();
+  const enqueueSnackbar = useEnqueueSnackbar();
   const authentication = useAuthentication();
 
   const onError = React.useCallback(

packages/web/src/components/AppConnectionRow/index.tsx

@@ -1,20 +1,20 @@
-import * as React from 'react';
 import { useLazyQuery, useMutation } from '@apollo/client';
-import Card from '@mui/material/Card';
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import CircularProgress from '@mui/material/CircularProgress';
-import CardActionArea from '@mui/material/CardActionArea';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import ErrorIcon from '@mui/icons-material/Error';
-import { useSnackbar } from 'notistack';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardActionArea from '@mui/material/CardActionArea';
+import CircularProgress from '@mui/material/CircularProgress';
+import Stack from '@mui/material/Stack';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import { DateTime } from 'luxon';
+import * as React from 'react';
 
 import type { IConnection } from '@automatisch/types';
+import ConnectionContextMenu from 'components/AppConnectionContextMenu';
 import { DELETE_CONNECTION } from 'graphql/mutations/delete-connection';
 import { TEST_CONNECTION } from 'graphql/queries/test-connection';
-import ConnectionContextMenu from 'components/AppConnectionContextMenu';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { CardContent, Typography } from './style';
 
@@ -30,7 +30,7 @@ const countTranslation = (value: React.ReactNode) => (
 );
 
 function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
-  const { enqueueSnackbar } = useSnackbar();
+  const enqueueSnackbar = useEnqueueSnackbar();
   const [verificationVisible, setVerificationVisible] = React.useState(false);
   const [testConnection, { called: testCalled, loading: testLoading }] =
     useLazyQuery(TEST_CONNECTION, {

packages/web/src/components/DeleteRoleButton/index.ee.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import { useMutation } from '@apollo/client';
-import IconButton from '@mui/material/IconButton';
 import DeleteIcon from '@mui/icons-material/Delete';
-import { useSnackbar } from 'notistack';
+import IconButton from '@mui/material/IconButton';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
+import * as React from 'react';
 
 import Can from 'components/Can';
 import ConfirmationDialog from 'components/ConfirmationDialog';
@@ -22,7 +22,7 @@ export default function DeleteRoleButton(props: DeleteRoleButtonProps) {
     refetchQueries: ['GetRoles'],
   });
   const formatMessage = useFormatMessage();
-  const { enqueueSnackbar } = useSnackbar();
+  const enqueueSnackbar = useEnqueueSnackbar();
 
   const handleConfirm = React.useCallback(async () => {
     try {

packages/web/src/components/DeleteUserButton/index.ee.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import { useMutation } from '@apollo/client';
-import IconButton from '@mui/material/IconButton';
 import DeleteIcon from '@mui/icons-material/Delete';
-import { useSnackbar } from 'notistack';
+import IconButton from '@mui/material/IconButton';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
+import * as React from 'react';
 
 import ConfirmationDialog from 'components/ConfirmationDialog';
 import { DELETE_USER } from 'graphql/mutations/delete-user.ee';
@@ -20,7 +20,7 @@ export default function DeleteUserButton(props: DeleteUserButtonProps) {
     refetchQueries: ['GetUsers'],
   });
   const formatMessage = useFormatMessage();
-  const { enqueueSnackbar } = useSnackbar();
+  const enqueueSnackbar = useEnqueueSnackbar();
 
   const handleConfirm = React.useCallback(async () => {
     try {

packages/web/src/components/FlowContextMenu/index.tsx

@@ -1,15 +1,15 @@
-import * as React from 'react';
 import { useMutation } from '@apollo/client';
-import { Link } from 'react-router-dom';
 import Menu from '@mui/material/Menu';
-import type { PopoverProps } from '@mui/material/Popover';
 import MenuItem from '@mui/material/MenuItem';
-import { useSnackbar } from 'notistack';
+import type { PopoverProps } from '@mui/material/Popover';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
+import * as React from 'react';
+import { Link } from 'react-router-dom';
 
 import Can from 'components/Can';
+import * as URLS from 'config/urls';
 import { DELETE_FLOW } from 'graphql/mutations/delete-flow';
 import { DUPLICATE_FLOW } from 'graphql/mutations/duplicate-flow';
-import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
 
 type ContextMenuProps = {
@@ -22,14 +22,11 @@ export default function ContextMenu(
   props: ContextMenuProps
 ): React.ReactElement {
   const { flowId, onClose, anchorEl } = props;
-  const { enqueueSnackbar } = useSnackbar();
+  const enqueueSnackbar = useEnqueueSnackbar();
   const [deleteFlow] = useMutation(DELETE_FLOW);
-  const [duplicateFlow] = useMutation(
-    DUPLICATE_FLOW,
-    {
-      refetchQueries: ['GetFlows'],
-    }
-  );
+  const [duplicateFlow] = useMutation(DUPLICATE_FLOW, {
+    refetchQueries: ['GetFlows'],
+  });
   const formatMessage = useFormatMessage();
 
   const onFlowDuplicate = React.useCallback(async () => {
@@ -75,11 +72,7 @@ export default function ContextMenu(
     >
       <Can I="read" a="Flow" passThrough>
         {(allowed) => (
-          <MenuItem
-            disabled={!allowed}
-            component={Link}
-            to={URLS.FLOW(flowId)}
-          >
+          <MenuItem disabled={!allowed} component={Link} to={URLS.FLOW(flowId)}>
             {formatMessage('flow.view')}
           </MenuItem>
         )}
@@ -87,10 +80,7 @@ export default function ContextMenu(
 
       <Can I="create" a="Flow" passThrough>
         {(allowed) => (
-          <MenuItem
-            disabled={!allowed}
-            onClick={onFlowDuplicate}
-          >
+          <MenuItem disabled={!allowed} onClick={onFlowDuplicate}>
             {formatMessage('flow.duplicate')}
           </MenuItem>
         )}
@@ -98,10 +88,7 @@ export default function ContextMenu(
 
       <Can I="delete" a="Flow" passThrough>
         {(allowed) => (
-          <MenuItem
-            disabled={!allowed}
-            onClick={onFlowDelete}
-          >
+          <MenuItem disabled={!allowed} onClick={onFlowDelete}>
             {formatMessage('flow.delete')}
           </MenuItem>
         )}

packages/web/src/components/ResetPasswordForm/index.ee.tsx

@@ -1,18 +1,18 @@
-import * as React from 'react';
-import { useSearchParams, useNavigate } from 'react-router-dom';
 import { useMutation } from '@apollo/client';
+import { yupResolver } from '@hookform/resolvers/yup';
+import LoadingButton from '@mui/lab/LoadingButton';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
-import LoadingButton from '@mui/lab/LoadingButton';
-import { useSnackbar } from 'notistack';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
+import * as React from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import * as yup from 'yup';
-import { yupResolver } from '@hookform/resolvers/yup';
 
-import * as URLS from 'config/urls';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
-import useFormatMessage from 'hooks/useFormatMessage';
+import * as URLS from 'config/urls';
 import { RESET_PASSWORD } from 'graphql/mutations/reset-password.ee';
+import useFormatMessage from 'hooks/useFormatMessage';
 
 const validationSchema = yup.object().shape({
   password: yup.string().required('resetPasswordForm.mandatoryInput'),
@@ -23,7 +23,7 @@ const validationSchema = yup.object().shape({
 });
 
 export default function ResetPasswordForm() {
-  const { enqueueSnackbar } = useSnackbar();
+  const enqueueSnackbar = useEnqueueSnackbar();
   const formatMessage = useFormatMessage();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
@@ -41,7 +41,9 @@ export default function ResetPasswordForm() {
       },
     });
 
-    enqueueSnackbar(formatMessage('resetPasswordForm.passwordUpdated'), { variant: 'success' });
+    enqueueSnackbar(formatMessage('resetPasswordForm.passwordUpdated'), {
+      variant: 'success',
+    });
 
     navigate(URLS.LOGIN);
   };
@@ -78,14 +80,18 @@ export default function ResetPasswordForm() {
               helperText={
                 touchedFields.password && errors?.password?.message
                   ? formatMessage(errors?.password?.message as string, {
-                      inputName: formatMessage('resetPasswordForm.passwordFieldLabel'),
+                      inputName: formatMessage(
+                        'resetPasswordForm.passwordFieldLabel'
+                      ),
                     })
                   : ''
               }
             />
 
             <TextField
-              label={formatMessage('resetPasswordForm.confirmPasswordFieldLabel')}
+              label={formatMessage(
+                'resetPasswordForm.confirmPasswordFieldLabel'
+              )}
               name="confirmPassword"
               fullWidth
               margin="dense"

packages/web/src/hooks/useEnqueueSnackbar.ts

@@ -0,0 +1,18 @@
+import type {
+  OptionsWithExtraProps,
+  SnackbarMessage,
+  VariantType
+} from 'notistack';
+import { useSnackbar } from 'notistack';
+
+type ExtendedOptionsWithExtraProps<V extends VariantType> = OptionsWithExtraProps<V> & {
+  SnackbarProps?: OptionsWithExtraProps<V> & { 'data-test'?: string; }
+}
+
+export default function useEnqueueSnackbar() {
+  const { enqueueSnackbar } = useSnackbar();
+
+  return function wrappedEnqueueSnackbar<V extends VariantType>(message: SnackbarMessage, options: ExtendedOptionsWithExtraProps<V>) {
+    return enqueueSnackbar(message, options);
+  };
+}

packages/web/src/pages/Authentication/RoleMappings.tsx

@@ -1,16 +1,16 @@
-import { useMemo } from 'react';
-import Stack from '@mui/material/Stack';
+import { useMutation } from '@apollo/client';
 import { TSamlAuthProvider, TSamlAuthProviderRole } from '@automatisch/types';
-import Typography from '@mui/material/Typography';
 import LoadingButton from '@mui/lab/LoadingButton';
 import Divider from '@mui/material/Divider';
-import { useMutation } from '@apollo/client';
-import { useSnackbar } from 'notistack';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
+import { useMemo } from 'react';
 
+import Form from 'components/Form';
 import { UPSERT_SAML_AUTH_PROVIDERS_ROLE_MAPPINGS } from 'graphql/mutations/upsert-saml-auth-providers-role-mappings';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useSamlAuthProviderRoleMappings from 'hooks/useSamlAuthProviderRoleMappings';
-import Form from 'components/Form';
 
 import RoleMappingsFieldArray from './RoleMappingsFieldsArray';
 
@@ -32,7 +32,7 @@ function generateFormRoleMappings(roleMappings: TSamlAuthProviderRole[]) {
 
 function RoleMappings({ provider, providerLoading }: RoleMappingsProps) {
   const formatMessage = useFormatMessage();
-  const { enqueueSnackbar } = useSnackbar();
+  const enqueueSnackbar = useEnqueueSnackbar();
   const { roleMappings, loading: roleMappingsLoading } =
     useSamlAuthProviderRoleMappings(provider?.id);
   const [

packages/web/src/pages/Authentication/SamlConfiguration.tsx

@@ -1,16 +1,15 @@
-import * as React from 'react';
+import { QueryResult, useMutation } from '@apollo/client';
+import { IRole, TSamlAuthProvider } from '@automatisch/types';
+import LoadingButton from '@mui/lab/LoadingButton';
 import Stack from '@mui/material/Stack';
 import MuiTextField from '@mui/material/TextField';
-import LoadingButton from '@mui/lab/LoadingButton';
-import { IRole } from '@automatisch/types';
-import { useSnackbar } from 'notistack';
-import { TSamlAuthProvider } from '@automatisch/types';
-import { QueryResult, useMutation } from '@apollo/client';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
+import * as React from 'react';
 
-import Form from 'components/Form';
-import TextField from 'components/TextField';
 import ControlledAutocomplete from 'components/ControlledAutocomplete';
+import Form from 'components/Form';
 import Switch from 'components/Switch';
+import TextField from 'components/TextField';
 
 import { UPSERT_SAML_AUTH_PROVIDER } from 'graphql/mutations/upsert-saml-auth-provider';
 import useFormatMessage from 'hooks/useFormatMessage';
@@ -47,7 +46,7 @@ function SamlConfiguration({
 }: SamlConfigurationProps) {
   const formatMessage = useFormatMessage();
   const { roles, loading: rolesLoading } = useRoles();
-  const { enqueueSnackbar } = useSnackbar();
+  const enqueueSnackbar = useEnqueueSnackbar();
   const [upsertSamlAuthProvider, { loading }] = useMutation(
     UPSERT_SAML_AUTH_PROVIDER
   );

packages/web/src/pages/CreateRole/index.ee.tsx

@@ -2,14 +2,14 @@ import { useMutation } from '@apollo/client';
 import LoadingButton from '@mui/lab/LoadingButton';
 import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
+import PermissionCatalogField from 'components/PermissionCatalogField/index.ee';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
-import PermissionCatalogField from 'components/PermissionCatalogField/index.ee';
-import { useSnackbar } from 'notistack';
 
+import Container from 'components/Container';
 import Form from 'components/Form';
 import PageTitle from 'components/PageTitle';
-import Container from 'components/Container';
 import TextField from 'components/TextField';
 import * as URLS from 'config/urls';
 import { CREATE_ROLE } from 'graphql/mutations/create-role.ee';
@@ -23,7 +23,7 @@ export default function CreateRole(): React.ReactElement {
   const navigate = useNavigate();
   const formatMessage = useFormatMessage();
   const [createRole, { loading }] = useMutation(CREATE_ROLE);
-  const { enqueueSnackbar } = useSnackbar();
+  const enqueueSnackbar = useEnqueueSnackbar();
 
   const handleRoleCreation = async (
     roleData: Partial<RoleWithComputedPermissions>

packages/web/src/pages/CreateUser/index.tsx

@@ -1,23 +1,23 @@
-import * as React from 'react';
-import { useNavigate } from 'react-router-dom';
 import { useMutation } from '@apollo/client';
+import { IRole, IUser } from '@automatisch/types';
+import LoadingButton from '@mui/lab/LoadingButton';
 import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
 import MuiTextField from '@mui/material/TextField';
-import LoadingButton from '@mui/lab/LoadingButton';
-import { IUser, IRole } from '@automatisch/types';
-import { useSnackbar } from 'notistack';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
 
-import { CREATE_USER } from 'graphql/mutations/create-user.ee';
-import * as URLS from 'config/urls';
 import Can from 'components/Can';
-import useRoles from 'hooks/useRoles.ee';
-import PageTitle from 'components/PageTitle';
 import Container from 'components/Container';
-import Form from 'components/Form';
 import ControlledAutocomplete from 'components/ControlledAutocomplete';
+import Form from 'components/Form';
+import PageTitle from 'components/PageTitle';
 import TextField from 'components/TextField';
+import * as URLS from 'config/urls';
+import { CREATE_USER } from 'graphql/mutations/create-user.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
+import useRoles from 'hooks/useRoles.ee';
 
 function generateRoleOptions(roles: IRole[]) {
   return roles?.map(({ name: label, id: value }) => ({ label, value }));
@@ -28,7 +28,7 @@ export default function CreateUser(): React.ReactElement {
   const formatMessage = useFormatMessage();
   const [createUser, { loading }] = useMutation(CREATE_USER);
   const { roles, loading: rolesLoading } = useRoles();
-  const { enqueueSnackbar } = useSnackbar();
+  const enqueueSnackbar = useEnqueueSnackbar();
 
   const handleUserCreation = async (userData: Partial<IUser>) => {
     try {

packages/web/src/pages/EditRole/index.ee.tsx

@@ -1,15 +1,15 @@
 import { useMutation } from '@apollo/client';
 import LoadingButton from '@mui/lab/LoadingButton';
 import Grid from '@mui/material/Grid';
-import Stack from '@mui/material/Stack';
 import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { useSnackbar } from 'notistack';
 
+import Container from 'components/Container';
 import Form from 'components/Form';
 import PageTitle from 'components/PageTitle';
-import Container from 'components/Container';
 import PermissionCatalogField from 'components/PermissionCatalogField/index.ee';
 import TextField from 'components/TextField';
 import * as URLS from 'config/urls';
@@ -32,7 +32,7 @@ export default function EditRole(): React.ReactElement {
   const navigate = useNavigate();
   const { roleId } = useParams<EditRoleParams>();
   const { role, loading: roleLoading } = useRole(roleId);
-  const { enqueueSnackbar } = useSnackbar();
+  const enqueueSnackbar = useEnqueueSnackbar();
 
   const handleRoleUpdate = async (
     roleData: Partial<RoleWithComputedPermissions>

packages/web/src/pages/EditUser/index.tsx

@@ -1,25 +1,25 @@
-import * as React from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
 import { useMutation } from '@apollo/client';
+import { IRole, IUser } from '@automatisch/types';
+import LoadingButton from '@mui/lab/LoadingButton';
 import Grid from '@mui/material/Grid';
+import Skeleton from '@mui/material/Skeleton';
 import Stack from '@mui/material/Stack';
 import MuiTextField from '@mui/material/TextField';
-import Skeleton from '@mui/material/Skeleton';
-import LoadingButton from '@mui/lab/LoadingButton';
-import { IUser, IRole } from '@automatisch/types';
-import { useSnackbar } from 'notistack';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
+import * as React from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
 
-import { UPDATE_USER } from 'graphql/mutations/update-user.ee';
 import Can from 'components/Can';
-import * as URLS from 'config/urls';
-import useUser from 'hooks/useUser';
-import useRoles from 'hooks/useRoles.ee';
-import PageTitle from 'components/PageTitle';
 import Container from 'components/Container';
-import Form from 'components/Form';
 import ControlledAutocomplete from 'components/ControlledAutocomplete';
+import Form from 'components/Form';
+import PageTitle from 'components/PageTitle';
 import TextField from 'components/TextField';
+import * as URLS from 'config/urls';
+import { UPDATE_USER } from 'graphql/mutations/update-user.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
+import useRoles from 'hooks/useRoles.ee';
+import useUser from 'hooks/useUser';
 
 type EditUserParams = {
   userId: string;
@@ -35,7 +35,7 @@ export default function EditUser(): React.ReactElement {
   const { userId } = useParams<EditUserParams>();
   const { user, loading: userLoading } = useUser(userId);
   const { roles, loading: rolesLoading } = useRoles();
-  const { enqueueSnackbar } = useSnackbar();
+  const enqueueSnackbar = useEnqueueSnackbar();
   const navigate = useNavigate();
 
   const handleUserUpdate = async (userDataToUpdate: Partial<IUser>) => {

packages/web/src/pages/ProfileSettings/index.tsx

@@ -1,29 +1,29 @@
-import * as React from 'react';
 import { useMutation } from '@apollo/client';
+import { yupResolver } from '@hookform/resolvers/yup';
 import Alert from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
-import Grid from '@mui/material/Grid';
-import Button from '@mui/material/Button';
-import { useSnackbar } from 'notistack';
-import { yupResolver } from '@hookform/resolvers/yup';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
+import * as React from 'react';
 import * as yup from 'yup';
 
-import PageTitle from 'components/PageTitle';
 import Container from 'components/Container';
-import Form from 'components/Form';
-import TextField from 'components/TextField';
 import DeleteAccountDialog from 'components/DeleteAccountDialog/index.ee';
+import Form from 'components/Form';
+import PageTitle from 'components/PageTitle';
+import TextField from 'components/TextField';
 import { UPDATE_CURRENT_USER } from 'graphql/mutations/update-current-user';
-import useFormatMessage from 'hooks/useFormatMessage';
 import useCurrentUser from 'hooks/useCurrentUser';
+import useFormatMessage from 'hooks/useFormatMessage';
 
 type TMutationInput = {
   fullName: string;
   email: string;
   password?: string;
-}
+};
 
 const validationSchema = yup
   .object({
@@ -43,8 +43,9 @@ const StyledForm = styled(Form)`
 `;
 
 function ProfileSettings() {
-  const [showDeleteAccountConfirmation, setShowDeleteAccountConfirmation] = React.useState(false);
-  const { enqueueSnackbar } = useSnackbar();
+  const [showDeleteAccountConfirmation, setShowDeleteAccountConfirmation] =
+    React.useState(false);
+  const enqueueSnackbar = useEnqueueSnackbar();
   const currentUser = useCurrentUser();
   const formatMessage = useFormatMessage();
   const [updateCurrentUser] = useMutation(UPDATE_CURRENT_USER);
@@ -55,7 +56,7 @@ function ProfileSettings() {
     const mutationInput: TMutationInput = {
       fullName,
       email,
-    }
+    };
 
     if (password) {
       mutationInput.password = password;
@@ -80,7 +81,6 @@ function ProfileSettings() {
     });
   };
 
-
   return (
     <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
       <Grid container item xs={12} sm={9} md={8} lg={6}>
@@ -90,7 +90,11 @@ function ProfileSettings() {
 
         <Grid item xs={12} justifyContent="flex-end">
           <StyledForm
-            defaultValues={{ ...currentUser, password: '', confirmPassword: '' }}
+            defaultValues={{
+              ...currentUser,
+              password: '',
+              confirmPassword: '',
+            }}
             onSubmit={handleProfileSettingsUpdate}
             resolver={yupResolver(validationSchema)}
             mode="onChange"
@@ -109,7 +113,7 @@ function ProfileSettings() {
                   fullWidth
                   name="fullName"
                   label={formatMessage('profileSettings.fullName')}
-                  margin='dense'
+                  margin="dense"
                   error={touchedFields.fullName && !!errors?.fullName}
                   helperText={errors?.fullName?.message || ' '}
                 />
@@ -118,7 +122,7 @@ function ProfileSettings() {
                   fullWidth
                   name="email"
                   label={formatMessage('profileSettings.email')}
-                  margin='dense'
+                  margin="dense"
                   error={touchedFields.email && !!errors?.email}
                   helperText={errors?.email?.message || ' '}
                 />
@@ -127,7 +131,7 @@ function ProfileSettings() {
                   fullWidth
                   name="password"
                   label={formatMessage('profileSettings.newPassword')}
-                  margin='dense'
+                  margin="dense"
                   type="password"
                   error={touchedFields.password && !!errors?.password}
                   helperText={
@@ -139,7 +143,7 @@ function ProfileSettings() {
                   fullWidth
                   name="confirmPassword"
                   label={formatMessage('profileSettings.confirmNewPassword')}
-                  margin='dense'
+                  margin="dense"
                   type="password"
                   error={
                     touchedFields.confirmPassword && !!errors?.confirmPassword
@@ -163,9 +167,11 @@ function ProfileSettings() {
           />
         </Grid>
 
-        <Grid item xs={12} justifyContent="flex-end" sx={{pt: 5 }}>
+        <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
           <Alert variant="outlined" severity="error" sx={{ fontWeight: 500 }}>
-            <AlertTitle sx={{ fontWeight: 700 }}>{formatMessage('profileSettings.deleteMyAccount')}</AlertTitle>
+            <AlertTitle sx={{ fontWeight: 700 }}>
+              {formatMessage('profileSettings.deleteMyAccount')}
+            </AlertTitle>
 
             <Typography variant="body1" gutterBottom>
               {formatMessage('profileSettings.deleteAccountSubtitle')}

packages/web/src/pages/UserInterface/index.tsx

@@ -1,26 +1,26 @@
-import * as React from 'react';
 import { useMutation } from '@apollo/client';
-import Grid from '@mui/material/Grid';
-import Stack from '@mui/material/Stack';
-import Skeleton from '@mui/material/Skeleton';
 import LoadingButton from '@mui/lab/LoadingButton';
-import { useSnackbar } from 'notistack';
+import Grid from '@mui/material/Grid';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import merge from 'lodash/merge';
+import * as React from 'react';
 
-import { GET_CONFIG } from 'graphql/queries/get-config.ee';
-import { UPDATE_CONFIG } from 'graphql/mutations/update-config.ee';
-import useConfig from 'hooks/useConfig';
-import PageTitle from 'components/PageTitle';
+import ColorInput from 'components/ColorInput';
 import Container from 'components/Container';
 import Form from 'components/Form';
+import PageTitle from 'components/PageTitle';
 import TextField from 'components/TextField';
-import useFormatMessage from 'hooks/useFormatMessage';
-import ColorInput from 'components/ColorInput';
+import { UPDATE_CONFIG } from 'graphql/mutations/update-config.ee';
+import { GET_CONFIG } from 'graphql/queries/get-config.ee';
 import nestObject from 'helpers/nestObject';
+import useConfig from 'hooks/useConfig';
+import useFormatMessage from 'hooks/useFormatMessage';
 import {
-  primaryMainColor,
   primaryDarkColor,
   primaryLightColor,
+  primaryMainColor,
 } from 'styles/theme';
 
 type UserInterface = {
@@ -58,7 +58,7 @@ export default function UserInterface(): React.ReactElement {
     'palette.primary.dark',
     'logo.svgData',
   ]);
-  const { enqueueSnackbar } = useSnackbar();
+  const enqueueSnackbar = useEnqueueSnackbar();
   const configWithDefaults = merge(
     {},
     defaultValues,

yarn.lock

@@ -9799,6 +9799,11 @@ globby@^11, globby@^11.0.1, globby@^11.0.2, globby@^11.0.3, globby@^11.0.4:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
+goober@^2.0.33:
+  version "2.1.13"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.13.tgz#e3c06d5578486212a76c9eba860cbc3232ff6d7c"
+  integrity sha512-jFj3BQeleOoy7t93E9rZ2de+ScC4lQICLwiAQmKMg9F6roKGaLSHoCDYKkWlSafg138jejvq/mTdvmnwDQgqoQ==
+
 got@^9.6.0:
   version "9.6.0"
   resolved "https://registry.npmjs.org/got/-/got-9.6.0.tgz"
@@ -13274,13 +13279,13 @@ normalize-url@^6.0.1, normalize-url@^6.1.0:
   resolved "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz"
   integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
 
-notistack@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/notistack/-/notistack-2.0.3.tgz"
-  integrity sha512-krmVFtTO9kEY1Pa4NrbyexrjiRcV6TqBM2xLx8nuDea1g96Z/OZfkvVLmYKkTvoSJ3jyQntWK16z86ssW5kt4A==
+notistack@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/notistack/-/notistack-3.0.1.tgz#daf59888ab7e2c30a1fa8f71f9cba2978773236e"
+  integrity sha512-ntVZXXgSQH5WYfyU+3HfcXuKaapzAJ8fBLQ/G618rn3yvSzEbnOB8ZSOwhX+dAORy/lw+GC2N061JA0+gYWTVA==
   dependencies:
     clsx "^1.1.0"
-    hoist-non-react-statics "^3.3.0"
+    goober "^2.0.33"
 
 npm-bundled@^1.1.1:
   version "1.1.2"