feat: handle 404 template error

packages/web/src/pages/AdminUpdateTemplate/index.jsx

@@ -1,7 +1,7 @@
 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 Alert from '@mui/material/Alert';
 import { useParams } from 'react-router-dom';
 
 import Container from 'components/Container';
@@ -9,8 +9,6 @@ import Form from 'components/Form';
 import PageTitle from 'components/PageTitle';
 import TextField from 'components/TextField';
 import useAdminTemplate from 'hooks/useAdminTemplate.ee';
-import useAutomatischConfig from 'hooks/useAutomatischConfig';
-import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useAdminUpdateTemplate from 'hooks/useAdminUpdateTemplate.ee';
 
@@ -18,8 +16,12 @@ function AdminUpdateTemplatePage() {
   const formatMessage = useFormatMessage();
   const { templateId } = useParams();
 
-  const { data: template, isLoading: isTemplateLoading } =
-    useAdminTemplate(templateId);
+  const {
+    data: template,
+    isLoading: isTemplateLoading,
+    isError: isTemplateError,
+    error: templateError,
+  } = useAdminTemplate(templateId);
 
   const { mutateAsync: updateTemplate, isPending } =
     useAdminUpdateTemplate(templateId);
@@ -38,12 +40,13 @@ function AdminUpdateTemplatePage() {
         <Grid item xs={12} sx={{ pt: 5, pb: 5 }}>
           <Stack spacing={5}></Stack>
           {!isTemplateLoading && (
-            <Form onSubmit={handleFormSubmit} defaultValues={template.data}>
+            <Form onSubmit={handleFormSubmit} defaultValues={template?.data}>
               <Stack direction="column" gap={2}>
                 <TextField
                   name="name"
                   label={formatMessage('adminUpdateTemplate.titleFieldLabel')}
                   fullWidth
+                  disabled={!template}
                 />
 
                 <LoadingButton
@@ -53,12 +56,18 @@ function AdminUpdateTemplatePage() {
                   sx={{ boxShadow: 2 }}
                   loading={isPending}
                   data-test="update-button"
+                  disabled={!template}
                 >
                   {formatMessage('adminUpdateTemplate.submit')}
                 </LoadingButton>
               </Stack>
             </Form>
           )}
+          {isTemplateError && (
+            <Alert severity="error" sx={{ mt: 3 }}>
+              {templateError?.message || formatMessage('genericError')}
+            </Alert>
+          )}
         </Grid>
       </Grid>
     </Container>