josh/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: handle 404 template error

Browse Source
This commit is contained in:
kasia.oczkowska
2025-03-27 12:24:52 +00:00
parent 4d83509f6b
commit 1596493d1e
9 changed files with 60 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
packages/web/src/components/AdminTemplateContextMenu/index.jsx
View File

@@ -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 (

27
packages/web/src/components/FlowsButtons/index.jsx
View File

@@ -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();

4
packages/web/src/components/TemplatesDialog/TemplateItem/TemplateItem.ee.jsx
View File

@@ -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();

7
packages/web/src/components/TemplatesDialog/index.ee.jsx
View File

@@ -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;

3
packages/web/src/hooks/useAdminDeleteTemplate.ee.js
View File

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

3
packages/web/src/pages/AdminCreateTemplate/index.jsx
View File

@@ -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';

21
packages/web/src/pages/AdminUpdateTemplate/index.jsx
View File

@@ -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>

36
packages/web/src/pages/Editor/create.jsx
View File

@@ -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>
);
}

4
packages/web/src/pages/Flows/index.jsx
View File

@@ -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';