diff --git a/packages/web/src/components/NoResultFound/index.tsx b/packages/web/src/components/NoResultFound/index.tsx index c4835665..1ed981d0 100644 --- a/packages/web/src/components/NoResultFound/index.tsx +++ b/packages/web/src/components/NoResultFound/index.tsx @@ -9,7 +9,7 @@ import { CardContent } from './style'; type NoResultFoundProps = { text?: string; - to: string; + to?: string; } export default function NoResultFound(props: NoResultFoundProps): React.ReactElement { @@ -21,6 +21,8 @@ export default function NoResultFound(props: NoResultFoundProps): React.ReactEle linkProps, ref, ) { + if (!to) return
{linkProps.children}
; + return ; }), [to], @@ -30,7 +32,7 @@ export default function NoResultFound(props: NoResultFoundProps): React.ReactEle - + {!!to && } {text} diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json index c75dabd7..dea54604 100644 --- a/packages/web/src/locales/en.json +++ b/packages/web/src/locales/en.json @@ -51,6 +51,7 @@ "flows.noFlows": "You don't have any flows yet.", "flowEditor.goBack": "Go back to flows", "executions.title": "Executions", + "executions.noExecutions": "There is no execution data point to show.", "execution.executedAt": "executed {datetime}", "profileSettings.title": "My Profile", "profileSettings.email": "Email", diff --git a/packages/web/src/pages/Executions/index.tsx b/packages/web/src/pages/Executions/index.tsx index 446411b2..aabe0557 100644 --- a/packages/web/src/pages/Executions/index.tsx +++ b/packages/web/src/pages/Executions/index.tsx @@ -3,15 +3,19 @@ import { Link, useSearchParams } from 'react-router-dom'; import { useQuery } from '@apollo/client'; import Box from '@mui/material/Box'; import Grid from '@mui/material/Grid'; +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 { IExecution } from '@automatisch/types'; +import NoResultFound from 'components/NoResultFound'; import ExecutionRow from 'components/ExecutionRow'; import Container from 'components/Container'; import PageTitle from 'components/PageTitle'; import useFormatMessage from 'hooks/useFormatMessage' import { GET_EXECUTIONS } from 'graphql/queries/get-executions'; +import * as URLS from 'config/urls'; const EXECUTION_PER_PAGE = 10; @@ -25,7 +29,7 @@ export default function Executions(): React.ReactElement { const [searchParams, setSearchParams] = useSearchParams(); const page = parseInt(searchParams.get('page') || '', 10) || 1; - const { data, refetch } = useQuery(GET_EXECUTIONS, { + const { data, refetch, loading } = useQuery(GET_EXECUTIONS, { variables: getLimitAndOffset(page), fetchPolicy: 'cache-and-network', pollInterval: 5000, @@ -38,17 +42,26 @@ export default function Executions(): React.ReactElement { }, [refetch, page]) const executions: IExecution[] = edges?.map(({ node }: { node: IExecution }) => node); + const hasExecutions = executions?.length; return ( - + {formatMessage('executions.title')} - {executions?.map((execution) => ())} + + + {loading && } + + {!loading && !hasExecutions && ()} + + {!loading && executions?.map((execution) => ())} {pageInfo && pageInfo.totalPages > 1 &&