[fix] better handling errors with updated alert component (#271)

src/core/snackbar/SnackbarProvider.tsx

@@ -1,12 +1,12 @@
 import {
   Alert,
   AlertColor,
+  AlertTitle,
   AlertProps as MuiAlertProps,
   Snackbar as MuiSnackbar,
   SnackbarProps as MuiSnackbarProps,
   Slide,
   SnackbarOrigin,
-  Typography,
   styled,
   useTheme,
 } from '@mui/material'
@@ -84,7 +84,7 @@ export function SnackbarElement({
       anchorOrigin={options?.anchorOrigin}
     >
       <Alert {...(options?.alertProps ?? {})} onClose={handleClose} severity={options?.severity}>
-        <Typography fontSize={18}>{message}</Typography>
+        <AlertTitle fontSize={18}>{message}</AlertTitle>
       </Alert>
     </Snackbar>
   )

src/pages/auth/login/LoginPage.tsx

@@ -1,7 +1,7 @@
 import { t, Trans } from '@lingui/macro'
 import SendIcon from '@mui/icons-material/Send'
 import { LoadingButton } from '@mui/lab'
-import { Divider, Grid, styled, TextField, Typography } from '@mui/material'
+import { Alert, Divider, Grid, styled, TextField, Typography } from '@mui/material'
 import { useMutation } from '@tanstack/react-query'
 import { AxiosError } from 'axios'
 import { FormEvent, Suspense, useRef, useState } from 'react'
@@ -176,7 +176,7 @@ export default function LoginPage() {
         ) : null}
         {loginError ? (
           <Grid item>
-            <Typography color="error.main">{getErrorDetailMessage(loginError)}</Typography>
+            <Alert severity="error">{getErrorDetailMessage(loginError)}</Alert>
           </Grid>
         ) : needOtp ? (
           <Grid item>

src/pages/auth/register/RegisterPage.tsx

@@ -1,7 +1,7 @@
 import { t, Trans } from '@lingui/macro'
 import SendIcon from '@mui/icons-material/Send'
 import { LoadingButton } from '@mui/lab'
-import { Divider, Grid, styled, TextField, Typography } from '@mui/material'
+import { Alert, Divider, Grid, styled, TextField, Typography } from '@mui/material'
 import { useMutation } from '@tanstack/react-query'
 import { AxiosError } from 'axios'
 import { FormEvent, Suspense, useState } from 'react'
@@ -104,7 +104,7 @@ export default function RegisterPage() {
         </Grid>
         {registerError && (
           <Grid item>
-            <Typography color="error.main">{registerError}</Typography>
+            <Alert severity="error">{registerError}</Alert>
           </Grid>
         )}
         <Grid item>

src/pages/panel/inventory/InventoryAdvanceSearch.tsx

@@ -46,7 +46,7 @@ export const InventoryAdvanceSearch = ({ hasError, hasChanges }: InventoryAdvanc
                     badgeContent={
                       <Tooltip
                         title={
-                          <Alert color="info" variant="outlined">
+                          <Alert severity="info" variant="outlined">
                             <Trans>
                               <AlertTitle>This search is complex.</AlertTitle>
                               The combo boxes below may not display all filter details but can help narrow your results. For full control,

src/pages/panel/resource-detail/ResourceDetailFailedCheckIgnoredChecks.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import DoneAllIcon from '@mui/icons-material/DoneAll'
-import { Alert, FormControlLabel, Stack, Switch, Typography } from '@mui/material'
+import { Alert, FormControlLabel, Stack, Switch } from '@mui/material'
 import { useEffect, useState } from 'react'
 import { FailedCheckIgnoreButton } from 'src/pages/panel/shared/failed-checks'
 
@@ -25,7 +25,7 @@ export const ResourceDetailFailedCheckIgnoredChecks = ({
   }, [ignoredChecks])
   return (
     <Alert
-      color={securityIgnore === '*' ? 'error' : 'warning'}
+      severity={securityIgnore === '*' ? 'error' : 'warning'}
       action={
         securityIgnore === '*' ? (
           <FailedCheckIgnoreButton
@@ -48,9 +48,7 @@ export const ResourceDetailFailedCheckIgnoredChecks = ({
         <Trans>All checks have been disabled for this resource</Trans>
       ) : (
         <Stack spacing={1}>
-          <Typography variant="caption">
-            <Trans>Some checks have been disabled for this resource</Trans>
-          </Typography>
+          <Trans>Some checks have been disabled for this resource</Trans>
           <Stack spacing={1}>
             {persistIgnoredChecks.map((item) => (
               <FormControlLabel

src/pages/panel/resource-detail/ResourceDetailView.tsx

@@ -6,6 +6,7 @@ import {
   Accordion,
   AccordionDetails,
   Alert,
+  AlertTitle,
   Box,
   Button,
   Divider,
@@ -269,10 +270,10 @@ export default function ResourceDetailView() {
                             </Button>
                           }
                         >
-                          <Alert color="warning">
-                            <Typography>
+                          <Alert severity="warning">
+                            <AlertTitle>
                               <Trans>To access this resource, please ensure that you are logged into the AWS account: {account}</Trans>
-                            </Typography>
+                            </AlertTitle>
                           </Alert>
                         </PopupModal>
                         <Button variant="contained" onClick={() => openResourceModalRef.current?.(true)} endIcon={<OpenInNewIcon />}>

src/pages/panel/shared/failed-checks/FailedChecks.tsx

@@ -1,13 +1,13 @@
 import { Trans } from '@lingui/macro'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
-import WarningIcon from '@mui/icons-material/Warning'
 import {
   Accordion,
   AccordionActions,
   AccordionDetails,
   AccordionSummary,
   Alert,
+  AlertTitle,
   Box,
   Button,
   Chip,
@@ -92,15 +92,15 @@ export const FailedChecks = ({ failedCheck, navigate, smallText, withResources,
         <AccordionDetails>
           {ignored ? (
             <Alert color="warning">
-              <Trans>Delayed Effect</Trans>:<br />
-              <Typography variant="h6">
-                <Trans>You've chosen to ignore this security check for the resource. Please note:</Trans>
-                <br />
-                <Trans>
-                  The change will be active from the next security scan onwards. Until the next scan, the resource will still show the
-                  failing check.
-                </Trans>
-              </Typography>
+              <AlertTitle>
+                <Trans>Delayed Effect</Trans>:
+              </AlertTitle>
+              <Trans>You've chosen to ignore this security check for the resource. Please note:</Trans>
+              <br />
+              <Trans>
+                The change will be active from the next security scan onwards. Until the next scan, the resource will still show the failing
+                check.
+              </Trans>
             </Alert>
           ) : null}
           <Typography variant={smallText ? 'h6' : 'h5'} fontWeight={smallText ? 800 : undefined} mt={2}>
@@ -221,13 +221,13 @@ export const FailedChecks = ({ failedCheck, navigate, smallText, withResources,
               ) : (
                 <Tooltip
                   title={
-                    <Stack direction="row" spacing={1} alignItems="center">
-                      <WarningIcon color="warning" />
-                      <Typography color="warning.main">
+                    <Alert severity="warning">
+                      <AlertTitle>
                         <Trans>If this security check does not apply to this resource, you can safely ignore it.</Trans>
-                      </Typography>
-                    </Stack>
+                      </AlertTitle>
+                    </Alert>
                   }
+                  slotProps={{ tooltip: { sx: { p: 0 } } }}
                   arrow
                 >
                   <FailedCheckIgnoreButton ignored={ignored} {...ignoreProps} />

src/pages/panel/user-settings/UserSettingsFormEmail.tsx

@@ -36,7 +36,7 @@ export const UserSettingsFormEmail = ({ ...rest }: UserSettingsFormEmailProps) =
     <>
       {isSuccess ? (
         <Stack direction="row" pb={2}>
-          <Alert variant="outlined" color="warning">
+          <Alert variant="outlined" severity="warning">
             *{' '}
             <Trans>
               Your new email address will become active once you have verified it by clicking on the confirmation link we have sent to your

src/pages/panel/workspace-settings-accounts-setup-cloud-aws/WorkspaceSettingsAccountsSetupCloudAWSPage.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import { Accordion, AccordionDetails, AccordionSummary, Alert, Box, Divider, Typography } from '@mui/material'
+import { Accordion, AccordionDetails, AccordionSummary, Alert, AlertTitle, Box, Divider, Typography } from '@mui/material'
 import { Suspense, useEffect } from 'react'
 import { useEvents } from 'src/core/events'
 import { SetupCloudButton } from 'src/pages/panel/shared/setup-cloud-button'
@@ -42,10 +42,10 @@ export default function WorkspaceSettingsAccountsSetupCloudAWSPage() {
         <Trans>In the next step we are going to set up the trust between FIX and your AWS cloud account.</Trans>
       </Typography>
       <Box mt={1}>
-        <Alert color="warning" sx={{ display: 'inline-flex' }}>
-          <Typography variant="h6" color="warning.main">
+        <Alert severity="warning" sx={{ display: 'inline-flex' }}>
+          <AlertTitle>
             <Trans>Make sure that you are already logged into the correct AWS account, before pressing the DEPLOY STACK button.</Trans>
-          </Typography>
+          </AlertTitle>
         </Alert>
       </Box>
       <Box mt={3} display="flex" flexDirection="column" justifyContent="start" height={507}>

src/pages/panel/workspace-settings-accounts-setup-cloud-gcp/WorkspaceSettingsAccountsSetupCloudGCPUploadKey.tsx

@@ -1,6 +1,6 @@
 import { Trans, t } from '@lingui/macro'
 import CloudUploadIcon from '@mui/icons-material/CloudUpload'
-import { Alert, Box, CircularProgress, Collapse, Divider, Skeleton, Stack, Typography } from '@mui/material'
+import { Alert, AlertTitle, Box, CircularProgress, Collapse, Divider, Skeleton, Stack, Typography } from '@mui/material'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { AxiosError } from 'axios'
 import { useRef, useState } from 'react'
@@ -95,26 +95,28 @@ export const WorkspaceSettingsAccountsSetupCloudGCPUploadKey = ({ isMobile }: Wo
         </Collapse>
         <Collapse in={!!error}>
           <Alert variant="outlined" severity="error" sx={{ pointerEvents: 'all', cursor: 'initial' }} onClick={(e) => e.stopPropagation()}>
-            <Typography textAlign="left" component="div" fontWeight={500}>
-              {errorResponse?.status === 422 && errorMessageDetail ? (
-                <>
+            {errorResponse?.status === 422 && errorMessageDetail ? (
+              <>
+                <AlertTitle>
                   <Trans>
                     The Google Cloud Service Account key file is valid but did not allow us to list available projects. It is important to
                     ensure that it has the necessary permissions and that the required APIs are enabled to avoid this error. The following
                     message was created by GCP when we tried to list the projects:
                   </Trans>
                   <Divider sx={{ my: 2 }} />
-                  <Typography fontWeight={700}>{extractAndSplitUrlFromText(errorMessageDetail)}</Typography>
-                </>
-              ) : (
+                </AlertTitle>
+                <Typography fontWeight={700}>{extractAndSplitUrlFromText(errorMessageDetail)}</Typography>
+              </>
+            ) : (
+              <AlertTitle>
                 <Trans>Invalid file, Please follow the step-by-step instructions {isMobile ? t`above` : t`on the right side`}.</Trans>
-              )}
-            </Typography>
+              </AlertTitle>
+            )}
           </Alert>
         </Collapse>
         <Collapse in={!!isSuccess}>
           <Alert variant="outlined" severity="success">
-            <Typography textAlign="center" fontSize={18} fontWeight={600}>
+            <AlertTitle>
               <Trans>
                 The Google Cloud Service Account has been updated successfully.
                 <br />
@@ -124,7 +126,7 @@ export const WorkspaceSettingsAccountsSetupCloudGCPUploadKey = ({ isMobile }: Wo
                 <br />
                 We will send you an email once the projects are ready.
               </Trans>
-            </Typography>
+            </AlertTitle>
           </Alert>
         </Collapse>
       </Stack>

src/pages/panel/workspace-settings-accounts/WorkspaceSettingsAccountsTable.tsx

@@ -1,5 +1,5 @@
 import { plural, t, Trans } from '@lingui/macro'
-import { Alert, Typography } from '@mui/material'
+import { Alert, AlertTitle } from '@mui/material'
 import { useSuspenseQueries } from '@tanstack/react-query'
 import { useUserProfile } from 'src/core/auth'
 import { getWorkspaceCloudAccountsQuery, getWorkspaceProductTiersQuery } from 'src/pages/panel/shared/queries'
@@ -36,8 +36,8 @@ export const WorkspaceSettingsAccountsTable = () => {
   const canInviteBasedOnTier = accountLimit > accountLength
 
   const enableErrorModalContent = canInviteBasedOnTier ? null : (
-    <Alert color="warning">
-      <Typography>
+    <Alert severity="warning">
+      <AlertTitle>
         <Trans>
           You currently have{' '}
           {plural(accountLength, {
@@ -52,7 +52,7 @@ export const WorkspaceSettingsAccountsTable = () => {
           enabled in {selectedWorkspace?.tier} tier. To increase your cloud account limit, you can upgrade your product tier{' '}
           <InternalLink to="/workspace-settings/billing-receipts">here</InternalLink>.
         </Trans>
-      </Typography>
+      </AlertTitle>
     </Alert>
   )
 

src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx

@@ -1,9 +1,7 @@
 import { Trans, plural, t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
-import InfoIcon from '@mui/icons-material/Info'
-import WarningIcon from '@mui/icons-material/Warning'
 import { LoadingButton } from '@mui/lab'
-import { Alert, Button, MenuItem, Select, Stack, Typography } from '@mui/material'
+import { Alert, AlertTitle, Button, MenuItem, Select, Stack, Typography } from '@mui/material'
 import { useMutation, useQueries, useQueryClient } from '@tanstack/react-query'
 import { AxiosError } from 'axios'
 import { MutableRefObject, useState } from 'react'
@@ -211,10 +209,10 @@ export const ChangeProductTierModal = ({
           <Trans>New Product Tier</Trans>: {productTierToLabel(selectedProductTier)}
         </Typography>
         {paymentMethod.method === 'aws_marketplace' && !paymentMethod.subscription_id ? (
-          <Alert color="warning">Make sure to log in to AWS Console before proceeding.</Alert>
+          <Alert severity="warning">Make sure to log in to AWS Console before proceeding.</Alert>
         ) : null}
-        <Alert color="info" icon={<InfoIcon />}>
-          <Typography>
+        <Alert severity="info">
+          <AlertTitle>
             <Trans>
               Info: Changes to your product tier will become active immediately and be applied for the current billing cycle.{' '}
               {isUpgrade ? null : ` ${t`Within a billing cycle you will be charged for the highest product tier that was active.`}`}
@@ -229,11 +227,11 @@ export const ChangeProductTierModal = ({
               })}{' '}
               UTC
             </Trans>
-          </Typography>
+          </AlertTitle>
         </Alert>
         {hasNumberOfCloudAccountLimitation ? (
-          <Alert color="warning" icon={<WarningIcon />}>
-            <Typography>
+          <Alert severity="warning">
+            <AlertTitle>
               <Trans>
                 You currently have{' '}
                 {plural(cloudAccountsLength, {
@@ -247,12 +245,12 @@ export const ChangeProductTierModal = ({
                 })}{' '}
                 in order to downgrade to the free tier.
               </Trans>
-            </Typography>
+            </AlertTitle>
           </Alert>
         ) : null}
         {hasNumberOfUserLimitation ? (
-          <Alert color="warning" icon={<WarningIcon />}>
-            <Typography>
+          <Alert severity="warning">
+            <AlertTitle>
               <Trans>
                 You currently have{' '}
                 {plural(usersLength, {
@@ -266,7 +264,7 @@ export const ChangeProductTierModal = ({
                 })}{' '}
                 in order to downgrade to the free tier.
               </Trans>
-            </Typography>
+            </AlertTitle>
           </Alert>
         ) : null}
       </Stack>