refactor(web): remove typescript

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

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { useParams } from 'react-router-dom';
+import { useQuery } from '@apollo/client';
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+import AlertTitle from '@mui/material/AlertTitle';
+import Alert from '@mui/material/Alert';
+import useFormatMessage from 'hooks/useFormatMessage';
+import ExecutionHeader from 'components/ExecutionHeader';
+import ExecutionStep from 'components/ExecutionStep';
+import Container from 'components/Container';
+import { GET_EXECUTION } from 'graphql/queries/get-execution';
+import { GET_EXECUTION_STEPS } from 'graphql/queries/get-execution-steps';
+const EXECUTION_PER_PAGE = 100;
+const getLimitAndOffset = (page) => ({
+  limit: EXECUTION_PER_PAGE,
+  offset: (page - 1) * EXECUTION_PER_PAGE,
+});
+export default function Execution() {
+  const { executionId } = useParams();
+  const formatMessage = useFormatMessage();
+  const { data: execution } = useQuery(GET_EXECUTION, {
+    variables: { executionId },
+  });
+  const { data, loading } = useQuery(GET_EXECUTION_STEPS, {
+    variables: { executionId, ...getLimitAndOffset(1) },
+  });
+  const { edges } = data?.getExecutionSteps || {};
+  const executionSteps = edges?.map((edge) => edge.node);
+  return (
+    <Container sx={{ py: 3 }}>
+      <ExecutionHeader execution={execution?.getExecution} />
+
+      <Grid container item sx={{ mt: 2, mb: [2, 5] }} rowGap={3}>
+        {!loading && !executionSteps?.length && (
+          <Alert severity="warning" sx={{ flex: 1 }}>
+            <AlertTitle sx={{ fontWeight: 700 }}>
+              {formatMessage('execution.noDataTitle')}
+            </AlertTitle>
+
+            <Box sx={{ fontWeight: 400 }}>
+              {formatMessage('execution.noDataMessage')}
+            </Box>
+          </Alert>
+        )}
+
+        {executionSteps?.map((executionStep) => (
+          <ExecutionStep
+            key={executionStep.id}
+            executionStep={executionStep}
+            step={executionStep.step}
+          />
+        ))}
+      </Grid>
+    </Container>
+  );
+}