feat: add single execution page

packages/web/src/components/ExecutionStep/index.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { useQuery } from '@apollo/client';
+import Stack from '@mui/material/Stack';
+import ErrorIcon from '@mui/icons-material/Error';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import type { IApp, IJSONObject, IExecutionStep, IStep } from '@automatisch/types';
+
+import TabPanel from 'components/TabPanel';
+import JSONViewer from 'components/JSONViewer';
+import AppIcon from 'components/AppIcon';
+import { GET_APPS } from 'graphql/queries/get-apps';
+import useFormatMessage from 'hooks/useFormatMessage';
+import { AppIconWrapper, AppIconStatusIconWrapper, Content, Header, Wrapper } from './style';
+
+type ExecutionStepProps = {
+  collapsed?: boolean;
+  step: IStep;
+  index?: number;
+  executionStep: IExecutionStep;
+}
+
+const validIcon = <CheckCircleIcon color="success" />;
+const errorIcon = <ErrorIcon color="error" />;
+
+export default function ExecutionStep(props: ExecutionStepProps): React.ReactElement | null {
+  const { executionStep, index, } = props;
+  const [activeTabIndex, setActiveTabIndex] = React.useState(0);
+  const step: IStep = executionStep.step;
+  const isTrigger = step.type === 'trigger';
+  const formatMessage = useFormatMessage();
+  const { data } = useQuery(GET_APPS, { variables: { onlyWithTriggers: isTrigger }});
+  const apps: IApp[] = data?.getApps;
+  const app = apps?.find((currentApp: IApp) => currentApp.key === step.appKey);
+
+  if  (!apps) return null;
+
+  const validationStatusIcon = executionStep.status === 'success' ? validIcon : errorIcon;
+
+  return (
+    <Wrapper elevation={1}>
+      <Header>
+        <Stack direction="row" alignItems="center" gap={2}>
+          <AppIconWrapper>
+            <AppIcon url={app?.iconUrl} name={app?.name} />
+
+            <AppIconStatusIconWrapper>
+              {validationStatusIcon}
+            </AppIconStatusIconWrapper>
+          </AppIconWrapper>
+
+          <div>
+            <Typography variant="caption">
+              {
+                isTrigger ?
+                  formatMessage('flowStep.triggerType') :
+                  formatMessage('flowStep.actionType')
+              }
+            </Typography>
+
+            <Typography variant="body2">
+              {step.position}. {app?.name}
+            </Typography>
+          </div>
+        </Stack>
+      </Header>
+
+      <Content sx={{ px: 2 }}>
+        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+          <Tabs value={activeTabIndex} onChange={(event, tabIndex) => setActiveTabIndex(tabIndex)}>
+            <Tab label="Data in" />
+            <Tab label="Data out" />
+            <Tab label="Execution step" />
+          </Tabs>
+        </Box>
+
+        <TabPanel value={activeTabIndex} index={0}>
+          <JSONViewer data={executionStep.dataIn} />
+        </TabPanel>
+
+        <TabPanel value={activeTabIndex} index={1}>
+          <JSONViewer data={executionStep.dataOut} />
+        </TabPanel>
+
+        <TabPanel value={activeTabIndex} index={2}>
+          <JSONViewer data={(executionStep as unknown) as IJSONObject} />
+        </TabPanel>
+      </Content>
+
+    </Wrapper>
+  )
+};

packages/web/src/components/ExecutionStep/style.ts

@@ -0,0 +1,42 @@
+import { styled, alpha } from '@mui/material/styles';
+import Card from '@mui/material/Card';
+
+export const AppIconWrapper = styled('div')`
+  position: relative;
+`;
+
+export const AppIconStatusIconWrapper = styled('span')`
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: translate(50%, -50%);
+  display: inline-flex;
+
+  svg {
+    // to make it distinguishable over an app icon
+    background: white;
+    border-radius: 100%;
+    overflow: hidden;
+  }
+`;
+
+export const Wrapper = styled(Card)`
+  width: 100%;
+  overflow: unset;
+`;
+
+type HeaderProps = {
+  collapsed?: boolean;
+}
+
+export const Header = styled('div', { shouldForwardProp: prop => prop !== 'collapsed' })<HeaderProps>`
+  padding: ${({ theme }) => theme.spacing(2)};
+  cursor: ${({ collapsed }) => collapsed ? 'pointer' : 'unset'};
+`;
+
+export const Content = styled('div')`
+  border: 1px solid ${({ theme }) => alpha(theme.palette.divider, .8)};
+  border-left: none;
+  border-right: none;
+  padding: ${({ theme }) => theme.spacing(2, 0)};
+`;