From 75abfda78384c095b5883d13ba180dd71c3f1909 Mon Sep 17 00:00:00 2001
From: "kasia.oczkowska" <katarzyna.oczkowska@theworkingroup.net>
Date: Thu, 14 Nov 2024 14:10:07 +0000
Subject: [PATCH] feat: inline login form error and unify Alert font weight

---
 .../components/AcceptInvitationForm/index.jsx |  2 +-
 .../src/components/AddAppConnection/index.jsx |  4 +--
 .../index.jsx                                 |  5 +--
 .../src/components/InstallationForm/index.jsx |  2 +-
 .../web/src/components/LoginForm/index.jsx    | 31 +++++++++++++------
 .../web/src/components/TestSubstep/index.jsx  | 11 ++-----
 packages/web/src/pages/CreateUser/index.jsx   |  1 -
 packages/web/src/pages/Execution/index.jsx    |  8 ++---
 .../web/src/pages/ProfileSettings/index.jsx   |  4 +--
 packages/web/src/styles/theme.js              | 14 +++++++++
 10 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/packages/web/src/components/AcceptInvitationForm/index.jsx b/packages/web/src/components/AcceptInvitationForm/index.jsx
index 8e04b6c6..bbd35c01 100644
--- a/packages/web/src/components/AcceptInvitationForm/index.jsx
+++ b/packages/web/src/components/AcceptInvitationForm/index.jsx
@@ -112,7 +112,7 @@ export default function ResetPasswordForm() {
               <Alert
                 data-test="accept-invitation-form-error"
                 severity="error"
-                sx={{ mt: 1, fontWeight: 500 }}
+                sx={{ mt: 1 }}
               >
                 {formatMessage('acceptInvitationForm.invalidToken')}
               </Alert>
diff --git a/packages/web/src/components/AddAppConnection/index.jsx b/packages/web/src/components/AddAppConnection/index.jsx
index d80191d7..dc14ad09 100644
--- a/packages/web/src/components/AddAppConnection/index.jsx
+++ b/packages/web/src/components/AddAppConnection/index.jsx
@@ -126,7 +126,7 @@ function AddAppConnection(props) {
       </DialogTitle>
 
       {authDocUrl && (
-        <Alert severity="info" sx={{ fontWeight: 300 }}>
+        <Alert severity="info">
           {formatMessage('addAppConnection.callToDocs', {
             appName: name,
             docsLink: generateExternalLink(authDocUrl),
@@ -138,7 +138,7 @@ function AddAppConnection(props) {
         <Alert
           data-test="add-connection-error"
           severity="error"
-          sx={{ mt: 1, fontWeight: 500, wordBreak: 'break-all' }}
+          sx={{ mt: 1, wordBreak: 'break-all' }}
         >
           {!errorDetails && errorMessage}
           {errorDetails && (
diff --git a/packages/web/src/components/AdminApplicationAuthClientDialog/index.jsx b/packages/web/src/components/AdminApplicationAuthClientDialog/index.jsx
index 2a0aec33..6c328c11 100644
--- a/packages/web/src/components/AdminApplicationAuthClientDialog/index.jsx
+++ b/packages/web/src/components/AdminApplicationAuthClientDialog/index.jsx
@@ -32,10 +32,7 @@ function AdminApplicationAuthClientDialog(props) {
     <Dialog open={true} onClose={onClose}>
       <DialogTitle>{title}</DialogTitle>
       {error && (
-        <Alert
-          severity="error"
-          sx={{ mt: 1, fontWeight: 500, wordBreak: 'break-all' }}
-        >
+        <Alert severity="error" sx={{ mt: 1, wordBreak: 'break-all' }}>
           {error.message}
         </Alert>
       )}
diff --git a/packages/web/src/components/InstallationForm/index.jsx b/packages/web/src/components/InstallationForm/index.jsx
index 07b5cac7..80d66b6c 100644
--- a/packages/web/src/components/InstallationForm/index.jsx
+++ b/packages/web/src/components/InstallationForm/index.jsx
@@ -188,7 +188,7 @@ function InstallationForm() {
         )}
       />
       {install.isSuccess && (
-        <Alert data-test="success-alert" severity="success" sx={{ mt: 3, fontWeight: 500 }}>
+        <Alert data-test="success-alert" severity="success" sx={{ mt: 3 }}>
           {formatMessage('installationForm.success', {
             link: (str) => (
               <Link
diff --git a/packages/web/src/components/LoginForm/index.jsx b/packages/web/src/components/LoginForm/index.jsx
index 3611417e..0924b1f3 100644
--- a/packages/web/src/components/LoginForm/index.jsx
+++ b/packages/web/src/components/LoginForm/index.jsx
@@ -11,16 +11,19 @@ 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';
+import { Alert } from '@mui/material';
 
 function LoginForm() {
   const isCloud = useCloud();
   const navigate = useNavigate();
   const formatMessage = useFormatMessage();
-  const enqueueSnackbar = useEnqueueSnackbar();
   const authentication = useAuthentication();
-  const { mutateAsync: createAccessToken, isPending: loading } =
-    useCreateAccessToken();
+  const {
+    mutateAsync: createAccessToken,
+    isPending: loading,
+    error,
+    isError,
+  } = useCreateAccessToken();
 
   React.useEffect(() => {
     if (authentication.isAuthenticated) {
@@ -37,11 +40,19 @@ function LoginForm() {
       });
       const { token } = data;
       authentication.updateToken(token);
-    } catch (error) {
-      enqueueSnackbar(error?.message || formatMessage('loginForm.error'), {
-        variant: 'error',
-      });
-    }
+    } catch {}
+  };
+
+  const renderError = () => {
+    const errors = error?.response?.data?.errors?.general || [
+      formatMessage('loginForm.error'),
+    ];
+
+    return errors.map((error) => (
+      <Alert severity="error" sx={{ mt: 2 }}>
+        {error}
+      </Alert>
+    ));
   };
 
   return (
@@ -94,6 +105,8 @@ function LoginForm() {
           </Link>
         )}
 
+        {isError && renderError()}
+
         <LoadingButton
           type="submit"
           variant="contained"
diff --git a/packages/web/src/components/TestSubstep/index.jsx b/packages/web/src/components/TestSubstep/index.jsx
index c957fc02..2fcc20aa 100644
--- a/packages/web/src/components/TestSubstep/index.jsx
+++ b/packages/web/src/components/TestSubstep/index.jsx
@@ -84,10 +84,7 @@ function TestSubstep(props) {
           }}
         >
           {hasError && (
-            <Alert
-              severity="error"
-              sx={{ mb: 2, fontWeight: 500, width: '100%' }}
-            >
+            <Alert severity="error" sx={{ mb: 2, width: '100%' }}>
               <pre style={{ margin: 0, whiteSpace: 'pre-wrap' }}>
                 {JSON.stringify(errorDetails, null, 2)}
               </pre>
@@ -104,13 +101,11 @@ function TestSubstep(props) {
               severity="warning"
               sx={{ mb: 1, width: '100%' }}
             >
-              <AlertTitle sx={{ fontWeight: 700 }}>
+              <AlertTitle>
                 {formatMessage('flowEditor.noTestDataTitle')}
               </AlertTitle>
 
-              <Box sx={{ fontWeight: 400 }}>
-                {formatMessage('flowEditor.noTestDataMessage')}
-              </Box>
+              <Box>{formatMessage('flowEditor.noTestDataMessage')}</Box>
             </Alert>
           )}
 
diff --git a/packages/web/src/pages/CreateUser/index.jsx b/packages/web/src/pages/CreateUser/index.jsx
index 42abe936..ad96ba96 100644
--- a/packages/web/src/pages/CreateUser/index.jsx
+++ b/packages/web/src/pages/CreateUser/index.jsx
@@ -124,7 +124,6 @@ export default function CreateUser() {
                 <Alert
                   severity="info"
                   color="primary"
-                  sx={{ fontWeight: '500' }}
                   data-test="invitation-email-info-alert"
                 >
                   {formatMessage('createUser.invitationEmailInfo', {
diff --git a/packages/web/src/pages/Execution/index.jsx b/packages/web/src/pages/Execution/index.jsx
index 39cec79a..fea74cf2 100644
--- a/packages/web/src/pages/Execution/index.jsx
+++ b/packages/web/src/pages/Execution/index.jsx
@@ -42,13 +42,9 @@ export default function Execution() {
       <Grid container item sx={{ mt: 2, mb: [2, 5] }} rowGap={3}>
         {!isExecutionStepsLoading && !data?.pages?.[0].data.length && (
           <Alert severity="warning" sx={{ flex: 1 }}>
-            <AlertTitle sx={{ fontWeight: 700 }}>
-              {formatMessage('execution.noDataTitle')}
-            </AlertTitle>
+            <AlertTitle>{formatMessage('execution.noDataTitle')}</AlertTitle>
 
-            <Box sx={{ fontWeight: 400 }}>
-              {formatMessage('execution.noDataMessage')}
-            </Box>
+            <Box>{formatMessage('execution.noDataMessage')}</Box>
           </Alert>
         )}
 
diff --git a/packages/web/src/pages/ProfileSettings/index.jsx b/packages/web/src/pages/ProfileSettings/index.jsx
index d0479525..068aca65 100644
--- a/packages/web/src/pages/ProfileSettings/index.jsx
+++ b/packages/web/src/pages/ProfileSettings/index.jsx
@@ -266,8 +266,8 @@ function ProfileSettings() {
         </Grid>
 
         <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
-          <Alert variant="outlined" severity="error" sx={{ fontWeight: 500 }}>
-            <AlertTitle sx={{ fontWeight: 700 }}>
+          <Alert variant="outlined" severity="error">
+            <AlertTitle>
               {formatMessage('profileSettings.deleteMyAccount')}
             </AlertTitle>
 
diff --git a/packages/web/src/styles/theme.js b/packages/web/src/styles/theme.js
index bf60c1d4..7c2257bc 100644
--- a/packages/web/src/styles/theme.js
+++ b/packages/web/src/styles/theme.js
@@ -278,6 +278,20 @@ export const defaultTheme = createTheme({
         }),
       },
     },
+    MuiAlert: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          fontWeight: theme.typography.fontWeightRegular,
+        }),
+      },
+    },
+    MuiAlertTitle: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          fontWeight: theme.typography.fontWeightBold,
+        }),
+      },
+    },
   },
 });
 export const mationTheme = createTheme(