Merge remote-tracking branch 'upstream/main' into AUT-1115

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

@@ -10,7 +10,7 @@ import CardActionArea from '@mui/material/CardActionArea';
 import CircularProgress from '@mui/material/CircularProgress';
 import Stack from '@mui/material/Stack';
 import { DateTime } from 'luxon';
-
+import { useQueryClient } from '@tanstack/react-query';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import ConnectionContextMenu from 'components/AppConnectionContextMenu';
 import { DELETE_CONNECTION } from 'graphql/mutations/delete-connection';
@@ -35,6 +35,7 @@ function AppConnectionRow(props) {
   const [verificationVisible, setVerificationVisible] = React.useState(false);
   const contextButtonRef = React.useRef(null);
   const [anchorEl, setAnchorEl] = React.useState(null);
+  const queryClient = useQueryClient();
 
   const [deleteConnection] = useMutation(DELETE_CONNECTION);
 
@@ -75,6 +76,9 @@ function AppConnectionRow(props) {
           },
         });
 
+        await queryClient.invalidateQueries({
+          queryKey: ['apps', key, 'connections'],
+        });
         enqueueSnackbar(formatMessage('connection.deletedMessage'), {
           variant: 'success',
           SnackbarProps: {
@@ -86,7 +90,7 @@ function AppConnectionRow(props) {
         testConnection({ variables: { id } });
       }
     },
-    [deleteConnection, id, testConnection, formatMessage, enqueueSnackbar],
+    [deleteConnection, id, queryClient, key, enqueueSnackbar, formatMessage, testConnection],
   );
 
   const relativeCreatedAt = DateTime.fromMillis(

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

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import { useMutation } from '@apollo/client';
 import DeleteIcon from '@mui/icons-material/Delete';
 import IconButton from '@mui/material/IconButton';
 import { useQueryClient } from '@tanstack/react-query';
@@ -7,16 +6,14 @@ import { useQueryClient } from '@tanstack/react-query';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import ConfirmationDialog from 'components/ConfirmationDialog';
-import { DELETE_USER } from 'graphql/mutations/delete-user.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
+import useAdminUserDelete from 'hooks/useAdminUserDelete';
 
 function DeleteUserButton(props) {
   const { userId } = props;
   const [showConfirmation, setShowConfirmation] = React.useState(false);
-  const [deleteUser] = useMutation(DELETE_USER, {
-    variables: { input: { id: userId } },
-    refetchQueries: ['GetUsers'],
-  });
+  const { mutateAsync: deleteUser } = useAdminUserDelete(userId);
+
   const formatMessage = useFormatMessage();
   const enqueueSnackbar = useEnqueueSnackbar();
   const queryClient = useQueryClient();
@@ -33,7 +30,12 @@ function DeleteUserButton(props) {
         },
       });
     } catch (error) {
-      throw new Error('Failed while deleting!');
+      enqueueSnackbar(
+        error?.message || formatMessage('deleteUserButton.deleteError'),
+        {
+          variant: 'error',
+        },
+      );
     }
   }, [deleteUser]);
 

packages/web/src/components/LoginForm/index.jsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useNavigate, Link as RouterLink } from 'react-router-dom';
-import { useMutation } from '@apollo/client';
 import Paper from '@mui/material/Paper';
 import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
@@ -8,17 +7,20 @@ import LoadingButton from '@mui/lab/LoadingButton';
 import useAuthentication from 'hooks/useAuthentication';
 import useCloud from 'hooks/useCloud';
 import * as URLS from 'config/urls';
-import { LOGIN } from 'graphql/mutations/login';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
 import useFormatMessage from 'hooks/useFormatMessage';
+import useCreateAccessToken from 'hooks/useCreateAccessToken';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 
 function LoginForm() {
   const isCloud = useCloud();
   const navigate = useNavigate();
   const formatMessage = useFormatMessage();
+  const enqueueSnackbar = useEnqueueSnackbar();
   const authentication = useAuthentication();
-  const [login, { loading }] = useMutation(LOGIN);
+  const { mutateAsync: createAccessToken, isPending: loading } =
+    useCreateAccessToken();
 
   React.useEffect(() => {
     if (authentication.isAuthenticated) {
@@ -27,13 +29,19 @@ function LoginForm() {
   }, [authentication.isAuthenticated]);
 
   const handleSubmit = async (values) => {
-    const { data } = await login({
-      variables: {
-        input: values,
-      },
-    });
-    const { token } = data.login;
-    authentication.updateToken(token);
+    try {
+      const { email, password } = values;
+      const { data } = await createAccessToken({
+        email,
+        password,
+      });
+      const { token } = data;
+      authentication.updateToken(token);
+    } catch (error) {
+      enqueueSnackbar(error?.message || formatMessage('loginForm.error'), {
+        variant: 'error',
+      });
+    }
   };
 
   return (

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

@@ -1,4 +1,3 @@
-import { useMutation } from '@apollo/client';
 import { yupResolver } from '@hookform/resolvers/yup';
 import LoadingButton from '@mui/lab/LoadingButton';
 import Paper from '@mui/material/Paper';
@@ -7,11 +6,12 @@ import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import * as yup from 'yup';
+
 import Form from 'components/Form';
 import TextField from 'components/TextField';
 import * as URLS from 'config/urls';
-import { RESET_PASSWORD } from 'graphql/mutations/reset-password.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
+import useResetPassword from 'hooks/useResetPassword';
 
 const validationSchema = yup.object().shape({
   password: yup.string().required('resetPasswordForm.mandatoryInput'),
@@ -26,25 +26,35 @@ export default function ResetPasswordForm() {
   const formatMessage = useFormatMessage();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
-  const [resetPassword, { data, loading }] = useMutation(RESET_PASSWORD);
+  const {
+    mutateAsync: resetPassword,
+    isPending,
+    isSuccess,
+  } = useResetPassword();
   const token = searchParams.get('token');
 
   const handleSubmit = async (values) => {
-    await resetPassword({
-      variables: {
-        input: {
-          password: values.password,
-          token,
+    const { password } = values;
+    try {
+      await resetPassword({
+        password,
+        token,
+      });
+      enqueueSnackbar(formatMessage('resetPasswordForm.passwordUpdated'), {
+        variant: 'success',
+        SnackbarProps: {
+          'data-test': 'snackbar-reset-password-success',
         },
-      },
-    });
-    enqueueSnackbar(formatMessage('resetPasswordForm.passwordUpdated'), {
-      variant: 'success',
-      SnackbarProps: {
-        'data-test': 'snackbar-reset-password-success',
-      },
-    });
-    navigate(URLS.LOGIN);
+      });
+      navigate(URLS.LOGIN);
+    } catch (error) {
+      enqueueSnackbar(
+        error?.message || formatMessage('resetPasswordForm.error'),
+        {
+          variant: 'error',
+        },
+      );
+    }
   };
 
   return (
@@ -113,8 +123,8 @@ export default function ResetPasswordForm() {
               variant="contained"
               color="primary"
               sx={{ boxShadow: 2, my: 3 }}
-              loading={loading}
-              disabled={data || !token}
+              loading={isPending}
+              disabled={isSuccess || !token}
               fullWidth
             >
               {formatMessage('resetPasswordForm.submit')}

packages/web/src/components/SignUpForm/index.ee.jsx

@@ -11,8 +11,10 @@ import * as URLS from 'config/urls';
 import { REGISTER_USER } from 'graphql/mutations/register-user.ee';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
-import { LOGIN } from 'graphql/mutations/login';
 import useFormatMessage from 'hooks/useFormatMessage';
+import useCreateAccessToken from 'hooks/useCreateAccessToken';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
+
 const validationSchema = yup.object().shape({
   fullName: yup.string().trim().required('signupForm.mandatoryInput'),
   email: yup
@@ -26,39 +28,57 @@ const validationSchema = yup.object().shape({
     .required('signupForm.mandatoryInput')
     .oneOf([yup.ref('password')], 'signupForm.passwordsMustMatch'),
 });
+
 const initialValues = {
   fullName: '',
   email: '',
   password: '',
   confirmPassword: '',
 };
+
 function SignUpForm() {
   const navigate = useNavigate();
   const authentication = useAuthentication();
   const formatMessage = useFormatMessage();
+  const enqueueSnackbar = useEnqueueSnackbar();
   const [registerUser, { loading: registerUserLoading }] =
     useMutation(REGISTER_USER);
-  const [login, { loading: loginLoading }] = useMutation(LOGIN);
+  const { mutateAsync: createAccessToken, isPending: loginLoading } =
+    useCreateAccessToken();
+
   React.useEffect(() => {
     if (authentication.isAuthenticated) {
       navigate(URLS.DASHBOARD);
     }
   }, [authentication.isAuthenticated]);
+
   const handleSubmit = async (values) => {
     const { fullName, email, password } = values;
+
     await registerUser({
       variables: {
-        input: { fullName, email, password },
+        input: {
+          fullName,
+          email,
+          password,
+        },
       },
     });
-    const { data } = await login({
-      variables: {
-        input: { email, password },
-      },
-    });
-    const { token } = data.login;
-    authentication.updateToken(token);
+
+    try {
+      const { data } = await createAccessToken({
+        email,
+        password,
+      });
+      const { token } = data;
+      authentication.updateToken(token);
+    } catch (error) {
+      enqueueSnackbar(error?.message || formatMessage('signupForm.error'), {
+        variant: 'error',
+      });
+    }
   };
+
   return (
     <Paper sx={{ px: 2, py: 4 }}>
       <Typography
@@ -168,4 +188,5 @@ function SignUpForm() {
     </Paper>
   );
 }
+
 export default SignUpForm;