diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json index c17954bb..5a10dd1f 100644 --- a/packages/web/src/locales/en.json +++ b/packages/web/src/locales/en.json @@ -47,6 +47,7 @@ "flowStep.actionType": "Action", "flows.create": "Create flow", "flows.title": "Flows", + "flows.noFlows": "You don't have any flows yet.", "flowEditor.goBack": "Go back to flows", "executions.title": "Executions", "execution.executedAt": "executed {datetime}", diff --git a/packages/web/src/pages/Flows/index.tsx b/packages/web/src/pages/Flows/index.tsx index c1ed6660..4df3825f 100644 --- a/packages/web/src/pages/Flows/index.tsx +++ b/packages/web/src/pages/Flows/index.tsx @@ -7,11 +7,13 @@ import Box from '@mui/material/Box'; import Grid from '@mui/material/Grid'; import AddIcon from '@mui/icons-material/Add'; import CircularProgress from '@mui/material/CircularProgress'; +import Divider from '@mui/material/Divider'; import Pagination from '@mui/material/Pagination'; import PaginationItem from '@mui/material/PaginationItem'; import type { IFlow } from '@automatisch/types'; import FlowRow from 'components/FlowRow'; +import NoResultFound from 'components/NoResultFound'; import ConditionalIconButton from 'components/ConditionalIconButton'; import Container from 'components/Container'; import PageTitle from 'components/PageTitle'; @@ -70,6 +72,7 @@ export default function Flows(): React.ReactElement { const { pageInfo, edges } = data?.getFlows || {}; const flows: IFlow[] = edges?.map(({ node }: { node: IFlow }) => node); + const hasFlows = flows?.length; const onSearchChange = React.useCallback((event) => { setFlowName(event.target.value); @@ -89,7 +92,7 @@ export default function Flows(): React.ReactElement { return ( - + {formatMessage('flows.title')} @@ -113,10 +116,17 @@ export default function Flows(): React.ReactElement { + + {loading && } {!loading && flows?.map((flow) => ())} + {!loading && !hasFlows && ()} + {!loading && pageInfo && pageInfo.totalPages > 1 &&