feat: handle 404 template error

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

@@ -1,6 +1,5 @@
 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 { useNavigate, useParams } from 'react-router-dom';
 
@@ -10,8 +9,6 @@ import Form from 'components/Form';
 import PageTitle from 'components/PageTitle';
 import TextField from 'components/TextField';
 import useFlow from 'hooks/useFlow';
-import useAutomatischConfig from 'hooks/useAutomatischConfig';
-import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useAdminCreateTemplate from 'hooks/useAdminCreateTemplate.ee';
 

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>

packages/web/src/pages/Editor/create.jsx

@@ -11,19 +11,27 @@ export default function CreateFlow() {
   const navigate = useNavigate();
   const formatMessage = useFormatMessage();
   const [searchParams] = useSearchParams();
-  const { mutateAsync: createFlow, isCreateFlowError } = useCreateFlow();
+  const {
+    mutateAsync: createFlow,
+    isCreateFlowError,
+    isError,
+    isPending,
+    error,
+  } = useCreateFlow();
 
   const navigateToEditor = (flowId) =>
     navigate(URLS.FLOW_EDITOR(flowId), { replace: true });
 
   React.useEffect(() => {
     async function initiate() {
-      const templateId = searchParams.get('templateId');
-      const response = await createFlow({ templateId });
+      try {
+        const templateId = searchParams.get('templateId');
+        const response = await createFlow({ templateId });
 
-      const flowId = response.data?.id;
+        const flowId = response.data?.id;
 
-      navigateToEditor(flowId);
+        navigateToEditor(flowId);
+      } catch {}
     }
 
     initiate();
@@ -44,11 +52,19 @@ export default function CreateFlow() {
         gap: 2,
       }}
     >
-      <CircularProgress size={16} thickness={7.5} />
-
-      <Typography variant="body2">
-        {formatMessage('createFlow.creating')}
-      </Typography>
+      {isPending && (
+        <>
+          <CircularProgress size={16} thickness={7.5} />
+          <Typography variant="body2">
+            {formatMessage('createFlow.creating')}
+          </Typography>{' '}
+        </>
+      )}
+      {isError && (
+        <Typography variant="body2">
+          {error?.message || formatMessage('genericError')}
+        </Typography>
+      )}
     </Box>
   );
 }

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

@@ -1,5 +1,3 @@
-import AddIcon from '@mui/icons-material/Add';
-import UploadIcon from '@mui/icons-material/Upload';
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 import Divider from '@mui/material/Divider';
@@ -15,10 +13,8 @@ import {
   useSearchParams,
 } from 'react-router-dom';
 
-import Can from 'components/Can';
 import FlowFilters from 'components/FlowFilters';
 import FlowsButtons from 'components/FlowsButtons';
-import ConditionalIconButton from 'components/ConditionalIconButton';
 import Container from 'components/Container';
 import FlowRow from 'components/FlowRow';
 import Folders from 'components/Folders';