feat: add single execution page

packages/web/src/pages/Execution/index.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { useParams } from 'react-router-dom';
+import { useQuery } from '@apollo/client';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import type { IExecutionStep } from '@automatisch/types';
+
+import ExecutionStep from 'components/ExecutionStep';
+import Container from 'components/Container';
+import { GET_EXECUTION_STEPS } from 'graphql/queries/get-execution-steps';
+
+type ExecutionParams = {
+  executionId: string;
+};
+
+const EXECUTION_PER_PAGE = 5;
+
+const getLimitAndOffset = (page: number) => ({
+  limit: EXECUTION_PER_PAGE,
+  offset: (page - 1) * EXECUTION_PER_PAGE,
+});
+
+export default function Execution(): React.ReactElement {
+  const { executionId } = useParams() as ExecutionParams;
+  const { data, fetchMore } = useQuery(GET_EXECUTION_STEPS, { variables: { executionId, ...getLimitAndOffset(1) } });
+
+  const { edges, pageInfo } = data?.getExecutionSteps || {};
+  const executionSteps: IExecutionStep[] = edges?.map((edge: { node: IExecutionStep }) => edge.node);
+
+  React.useEffect(() => {
+    if (pageInfo?.currentPage < pageInfo?.totalPages) {
+      fetchMore({
+        variables: {
+          executionId,
+          ...getLimitAndOffset(pageInfo.currentPage + 1),
+        }
+      });
+    }
+  }, [executionId, fetchMore, pageInfo]);
+
+  return (
+    <Box sx={{ py: 3 }}>
+      <Container>
+        <Grid container item sx={{ mb: [2, 5] }} columnSpacing={1.5} rowGap={3}>
+          {executionSteps?.map((executionStep) => (
+            <ExecutionStep key={executionStep.id} executionStep={executionStep} step={executionStep.step} />
+          ))}
+        </Grid>
+      </Container>
+    </Box>
+  );
+};

packages/web/src/pages/Flow/index.tsx

@@ -5,24 +5,22 @@ import Grid from '@mui/material/Grid';
 
 import Container from 'components/Container';
 
-type ApplicationParams = {
+type FlowParams = {
   flowId: string;
 };
 
 export default function Flow(): React.ReactElement {
-  const { flowId } = useParams() as ApplicationParams;
+  const { flowId } = useParams() as FlowParams;
 
   return (
-    <>
-      <Box sx={{ py: 3 }}>
-        <Container>
-          <Grid container>
-            <Grid item xs>
-              {flowId}
-            </Grid>
+    <Box sx={{ py: 3 }}>
+      <Container>
+        <Grid container>
+          <Grid item xs>
+            {flowId}
           </Grid>
-        </Container>
-      </Box>
-    </>
+        </Grid>
+      </Container>
+    </Box>
   );
 };