Merge pull request #444 from automatisch/issue-440

feat: add no result found UI on executions

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 <div>{linkProps.children}</div>;
+
         return <Link ref={ref} to={to} {...linkProps} />;
       }),
     [to],
@@ -30,7 +32,7 @@ export default function NoResultFound(props: NoResultFoundProps): React.ReactEle
     <Card elevation={0}>
       <CardActionArea component={ActionAreaLink} {...props}>
         <CardContent>
-          <AddCircleIcon color="primary" />
+          {!!to && <AddCircleIcon color="primary" />}
 
           <Typography variant="body1">
             {text}

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",

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 (
     <Box sx={{ py: 3 }}>
       <Container>
-        <Grid container sx={{ mb: [2, 5] }} columnSpacing={1.5} rowSpacing={3}>
+        <Grid container sx={{ mb: [0, 3] }} columnSpacing={1.5} rowSpacing={3}>
           <Grid container item xs sm alignItems="center" order={{ xs: 0, height: 80 }}>
             <PageTitle>{formatMessage('executions.title')}</PageTitle>
           </Grid>
         </Grid>
 
-        {executions?.map((execution) => (<ExecutionRow key={execution.id} execution={execution} />))}
+        <Divider sx={{ mt: [2, 0], mb: 2 }} />
+
+        {loading && <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />}
+
+        {!loading && !hasExecutions && (<NoResultFound
+          text={formatMessage('executions.noExecutions')}
+        />)}
+
+        {!loading && executions?.map((execution) => (<ExecutionRow key={execution.id} execution={execution} />))}
 
         {pageInfo && pageInfo.totalPages > 1 && <Pagination
           sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}