From 1596493d1efb5b804f2fe37a81ef4c7bfc9fa663 Mon Sep 17 00:00:00 2001 From: "kasia.oczkowska" Date: Thu, 27 Mar 2025 12:24:52 +0000 Subject: [PATCH] feat: handle 404 template error --- .../AdminTemplateContextMenu/index.jsx | 35 ++++++++---------- .../web/src/components/FlowsButtons/index.jsx | 27 ++------------ .../TemplateItem/TemplateItem.ee.jsx | 4 --- .../components/TemplatesDialog/index.ee.jsx | 7 ---- .../src/hooks/useAdminDeleteTemplate.ee.js | 3 ++ .../src/pages/AdminCreateTemplate/index.jsx | 3 -- .../src/pages/AdminUpdateTemplate/index.jsx | 21 +++++++---- packages/web/src/pages/Editor/create.jsx | 36 +++++++++++++------ packages/web/src/pages/Flows/index.jsx | 4 --- 9 files changed, 60 insertions(+), 80 deletions(-) diff --git a/packages/web/src/components/AdminTemplateContextMenu/index.jsx b/packages/web/src/components/AdminTemplateContextMenu/index.jsx index d8c963c1..df63ff7e 100644 --- a/packages/web/src/components/AdminTemplateContextMenu/index.jsx +++ b/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( - formatMessage('adminTemplateContextMenu.successfullyDeleted'), - { - variant: 'success', - }, - ); + enqueueSnackbar( + formatMessage('adminTemplateContextMenu.successfullyDeleted'), + { + variant: 'success', + }, + ); - onClose(); + onClose(); + } catch (error) { + enqueueSnackbar(error?.message || formatMessage('genericError'), { + variant: 'error', + }); + } }, [deleteTemplate, enqueueSnackbar, formatMessage, onClose]); return ( diff --git a/packages/web/src/components/FlowsButtons/index.jsx b/packages/web/src/components/FlowsButtons/index.jsx index ebd091e3..44abf690 100644 --- a/packages/web/src/components/FlowsButtons/index.jsx +++ b/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 { - Link, - Route, - Routes, - useNavigate, - useSearchParams, -} from 'react-router-dom'; +import { Link } 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(); diff --git a/packages/web/src/components/TemplatesDialog/TemplateItem/TemplateItem.ee.jsx b/packages/web/src/components/TemplatesDialog/TemplateItem/TemplateItem.ee.jsx index 0233958f..517134a4 100644 --- a/packages/web/src/components/TemplatesDialog/TemplateItem/TemplateItem.ee.jsx +++ b/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(); diff --git a/packages/web/src/components/TemplatesDialog/index.ee.jsx b/packages/web/src/components/TemplatesDialog/index.ee.jsx index 6cf44338..9272e475 100644 --- a/packages/web/src/components/TemplatesDialog/index.ee.jsx +++ b/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; diff --git a/packages/web/src/hooks/useAdminDeleteTemplate.ee.js b/packages/web/src/hooks/useAdminDeleteTemplate.ee.js index 38e9f05b..40bf3d83 100644 --- a/packages/web/src/hooks/useAdminDeleteTemplate.ee.js +++ b/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'], + }); }, }); diff --git a/packages/web/src/pages/AdminCreateTemplate/index.jsx b/packages/web/src/pages/AdminCreateTemplate/index.jsx index b3f56cfe..20fe10a9 100644 --- a/packages/web/src/pages/AdminCreateTemplate/index.jsx +++ b/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'; diff --git a/packages/web/src/pages/AdminUpdateTemplate/index.jsx b/packages/web/src/pages/AdminUpdateTemplate/index.jsx index e1f8db91..0263c4a0 100644 --- a/packages/web/src/pages/AdminUpdateTemplate/index.jsx +++ b/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() { {!isTemplateLoading && ( -
+ {formatMessage('adminUpdateTemplate.submit')}
)} + {isTemplateError && ( + + {templateError?.message || formatMessage('genericError')} + + )} diff --git a/packages/web/src/pages/Editor/create.jsx b/packages/web/src/pages/Editor/create.jsx index 043b3793..c21c676e 100644 --- a/packages/web/src/pages/Editor/create.jsx +++ b/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, }} > - - - - {formatMessage('createFlow.creating')} - + {isPending && ( + <> + + + {formatMessage('createFlow.creating')} + {' '} + + )} + {isError && ( + + {error?.message || formatMessage('genericError')} + + )} ); } diff --git a/packages/web/src/pages/Flows/index.jsx b/packages/web/src/pages/Flows/index.jsx index 3cf4bff3..2fc5da75 100644 --- a/packages/web/src/pages/Flows/index.jsx +++ b/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';