111 lines
3.4 KiB
JavaScript
111 lines
3.4 KiB
JavaScript
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 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();
|
|
const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'));
|
|
const canCreateFlow = currentUserAbility.can('create', 'Flow');
|
|
const enableTemplates = config?.data.enableTemplates === true;
|
|
|
|
const createFlowButtonData = {
|
|
label: formatMessage('flows.createFlow'),
|
|
key: 'createFlow',
|
|
'data-test': 'create-flow-button',
|
|
to: URLS.CREATE_FLOW,
|
|
startIcon: <AddIcon />,
|
|
};
|
|
|
|
const createFlowFromTemplateButtonData = {
|
|
label: formatMessage('flows.createFlowFromTemplate'),
|
|
key: 'createFlowFromTemplate',
|
|
'data-test': 'create-flow-from-template-button',
|
|
hide: !enableTemplates,
|
|
to: URLS.VIEW_TEMPLATES,
|
|
};
|
|
|
|
const importFlowButtonData = {
|
|
label: formatMessage('flows.importFlow'),
|
|
key: 'importFlow',
|
|
'data-test': 'import-flow-button',
|
|
to: URLS.IMPORT_FLOW,
|
|
};
|
|
|
|
if (matchSmallScreens) {
|
|
const connectionOptions = [
|
|
createFlowButtonData,
|
|
createFlowFromTemplateButtonData,
|
|
importFlowButtonData,
|
|
].filter((option) => !option.hide);
|
|
|
|
return (
|
|
<>
|
|
<SplitButton disabled={!canCreateFlow} options={connectionOptions} />
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
type="submit"
|
|
variant="outlined"
|
|
color="info"
|
|
size="large"
|
|
component={Link}
|
|
disabled={!canCreateFlow}
|
|
startIcon={<UploadIcon />}
|
|
to={URLS.IMPORT_FLOW}
|
|
data-test="import-flow-button"
|
|
>
|
|
{formatMessage('flows.importFlow')}
|
|
</Button>
|
|
|
|
<SplitButton
|
|
disabled={!canCreateFlow}
|
|
options={[
|
|
createFlowButtonData,
|
|
createFlowFromTemplateButtonData,
|
|
].filter((option) => !option.hide)}
|
|
/>
|
|
</>
|
|
);
|
|
}
|