feat: handle 404 template error

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

@@ -1,44 +1,37 @@
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
-import { useQueryClient } from '@tanstack/react-query';
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { Link, useNavigate } from 'react-router-dom';
 
 import Can from 'components/Can';
-import FlowFolderChangeDialog from 'components/FlowFolderChangeDialog';
-import * as URLS from 'config/urls';
 import useAdminDeleteTemplate from 'hooks/useAdminDeleteTemplate.ee';
-import useDownloadJsonAsFile from 'hooks/useDownloadJsonAsFile';
-import useDuplicateFlow from 'hooks/useDuplicateFlow';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
-import useExportFlow from 'hooks/useExportFlow';
 import useFormatMessage from 'hooks/useFormatMessage';
-import useIsCurrentUserAdmin from 'hooks/useIsCurrentUserAdmin';
 
 function AdminTemplateContextMenu(props) {
   const { templateId, onClose, anchorEl } = props;
 
-  const [showFlowFolderChangeDialog, setShowFlowFolderChangeDialog] =
-    React.useState(false);
-
-  const navigate = useNavigate();
   const enqueueSnackbar = useEnqueueSnackbar();
   const formatMessage = useFormatMessage();
-  const isCurrentUserAdmin = useIsCurrentUserAdmin();
   const { mutateAsync: deleteTemplate } = useAdminDeleteTemplate(templateId);
 
   const onTemplateDelete = React.useCallback(async () => {
-    await deleteTemplate();
+    try {
+      await deleteTemplate();
 
-    enqueueSnackbar(
+      enqueueSnackbar(
-      formatMessage('adminTemplateContextMenu.successfullyDeleted'),
+        formatMessage('adminTemplateContextMenu.successfullyDeleted'),
-      {
+        {
-        variant: 'success',
+          variant: 'success',
-      },
+        },
-    );
+      );
 
-    onClose();
+      onClose();
+    } catch (error) {
+      enqueueSnackbar(error?.message || formatMessage('genericError'), {
+        variant: 'error',
+      });
+    }
   }, [deleteTemplate, enqueueSnackbar, formatMessage, onClose]);
 
   return (

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

@@ -1,43 +1,20 @@
 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';
-import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
-import Pagination from '@mui/material/Pagination';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import PaginationItem from '@mui/material/PaginationItem';
 import * as React from 'react';
-import {
+import { Link } from 'react-router-dom';
-  Link,
-  Route,
-  Routes,
-  useNavigate,
-  useSearchParams,
-} from 'react-router-dom';
 
-import Can from 'components/Can';
-import ConditionalIconButton from 'components/ConditionalIconButton';
-import Container from 'components/Container';
-import FlowRow from 'components/FlowRow';
-import Folders from 'components/Folders';
-import ImportFlowDialog from 'components/ImportFlowDialog';
 import SplitButton from 'components/SplitButton';
-import NoResultFound from 'components/NoResultFound';
+
-import PageTitle from 'components/PageTitle';
-import SearchInput from 'components/SearchInput';
-import TemplatesDialog from 'components/TemplatesDialog/index.ee';
 import * as URLS from 'config/urls';
 import useCurrentUserAbility from 'hooks/useCurrentUserAbility';
-import useFlows from 'hooks/useFlows';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useAutomatischConfig from 'hooks/useAutomatischConfig';
 
 export default function FlowsButtons() {
   const formatMessage = useFormatMessage();
-  const navigate = useNavigate();
   const currentUserAbility = useCurrentUserAbility();
   const theme = useTheme();
   const { data: config } = useAutomatischConfig();

packages/web/src/components/TemplatesDialog/TemplateItem/TemplateItem.ee.jsx

@@ -3,20 +3,16 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import Card from '@mui/material/Card';
 import CardActionArea from '@mui/material/CardActionArea';
-import { DateTime } from 'luxon';
 import IconButton from '@mui/material/IconButton';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 
 import FlowAppIcons from 'components/FlowAppIcons';
 import AdminTemplateContextMenu from 'components/AdminTemplateContextMenu';
-import useFormatMessage from 'hooks/useFormatMessage';
-import * as URLS from 'config/urls';
 import { Apps, CardContent, ContextMenu, Title, Typography } from './style';
 import { FlowPropType } from 'propTypes/propTypes';
 import useIsCurrentUserAdmin from 'hooks/useIsCurrentUserAdmin';
 
 function TemplateItem(props) {
-  const formatMessage = useFormatMessage();
   const contextButtonRef = React.useRef(null);
   const [anchorEl, setAnchorEl] = React.useState(null);
   const isCurrentUserAdmin = useIsCurrentUserAdmin();

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

@@ -1,23 +1,16 @@
-import AddIcon from '@mui/icons-material/Add';
 import CloseIcon from '@mui/icons-material/Close';
-import Alert from '@mui/material/Alert';
-import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 import IconButton from '@mui/material/IconButton';
-import TextField from '@mui/material/TextField';
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import * as URLS from 'config/urls';
-import { getUnifiedErrorMessage } from 'helpers/errors';
 import useTemplates from 'hooks/useTemplates.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
 import TemplateItem from './TemplateItem/TemplateItem.ee';
-import NoResultFound from 'components/NoResultFound';
 
 export default function TemplatesDialog(props) {
   const { open = true } = props;

packages/web/src/hooks/useAdminDeleteTemplate.ee.js

@@ -16,6 +16,9 @@ export default function useAdminDeleteTemplate(templateId) {
       await queryClient.invalidateQueries({
         queryKey: ['admin', 'templates'],
       });
+      await queryClient.invalidateQueries({
+        queryKey: ['templates'],
+      });
     },
   });
 

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 } =
+  const {
-    useAdminTemplate(templateId);
+    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');
+      try {
-      const response = await createFlow({ templateId });
+        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} />
+      {isPending && (
-
+        <>
-      <Typography variant="body2">
+          <CircularProgress size={16} thickness={7.5} />
-        {formatMessage('createFlow.creating')}
+          <Typography variant="body2">
-      </Typography>
+            {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';