refactor(web): remove typescript

2024-02-27 15:23:23 +00:00
parent 636870a075
commit b3ae2d2748
337 changed files with 2067 additions and 4997 deletions
--- a/packages/web/src/components/ExecutionStep/index.jsx
+++ b/packages/web/src/components/ExecutionStep/index.jsx
@@ -0,0 +1,138 @@
+import * as React from 'react';
+import { DateTime } from 'luxon';
+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 Tooltip from '@mui/material/Tooltip';
+import Box from '@mui/material/Box';
+import TabPanel from 'components/TabPanel';
+import SearchableJSONViewer from 'components/SearchableJSONViewer';
+import AppIcon from 'components/AppIcon';
+import useFormatMessage from 'hooks/useFormatMessage';
+import useApps from 'hooks/useApps';
+import {
+  AppIconWrapper,
+  AppIconStatusIconWrapper,
+  Content,
+  Header,
+  Metadata,
+  Wrapper,
+} from './style';
+function ExecutionStepId(props) {
+  const formatMessage = useFormatMessage();
+  const id = (
+    <Typography variant="caption" component="span">
+      {props.id}
+    </Typography>
+  );
+  return (
+    <Box sx={{ display: 'flex' }} gridArea="id">
+      <Typography variant="caption" fontWeight="bold">
+        {formatMessage('executionStep.id', { id })}
+      </Typography>
+    </Box>
+  );
+}
+function ExecutionStepDate(props) {
+  const formatMessage = useFormatMessage();
+  const createdAt = DateTime.fromMillis(parseInt(props.createdAt, 10));
+  const relativeCreatedAt = createdAt.toRelative();
+  return (
+    <Tooltip
+      title={createdAt.toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)}
+    >
+      <Typography variant="caption" gutterBottom>
+        {formatMessage('executionStep.executedAt', {
+          datetime: relativeCreatedAt,
+        })}
+      </Typography>
+    </Tooltip>
+  );
+}
+const validIcon = <CheckCircleIcon color="success" />;
+const errorIcon = <ErrorIcon color="error" />;
+export default function ExecutionStep(props) {
+  const { executionStep } = props;
+  const [activeTabIndex, setActiveTabIndex] = React.useState(0);
+  const step = executionStep.step;
+  const isTrigger = step.type === 'trigger';
+  const isAction = step.type === 'action';
+  const formatMessage = useFormatMessage();
+  const { apps } = useApps({
+    onlyWithTriggers: isTrigger,
+    onlyWithActions: isAction,
+  });
+  const app = apps?.find((currentApp) => currentApp.key === step.appKey);
+  if (!apps) return null;
+  const validationStatusIcon =
+    executionStep.status === 'success' ? validIcon : errorIcon;
+  const hasError = !!executionStep.errorDetails;
+  return (
+    <Wrapper elevation={1} data-test="execution-step">
+      <Header>
+        <Stack direction="row" gap={3}>
+          <AppIconWrapper>
+            <AppIconStatusIconWrapper>
+              <AppIcon url={app?.iconUrl} name={app?.name} />
+
+              {validationStatusIcon}
+            </AppIconStatusIconWrapper>
+          </AppIconWrapper>
+
+          <Metadata flex="1">
+            <ExecutionStepId id={executionStep.step.id} />
+
+            <Box flex="1" gridArea="step">
+              <Typography variant="caption">
+                {isTrigger && formatMessage('flowStep.triggerType')}
+                {isAction && formatMessage('flowStep.actionType')}
+              </Typography>
+
+              <Typography variant="body2">
+                {step.position}. {app?.name}
+              </Typography>
+            </Box>
+
+            <Box
+              display="flex"
+              justifyContent={['left', 'right']}
+              gridArea="date"
+            >
+              <ExecutionStepDate createdAt={executionStep.createdAt} />
+            </Box>
+          </Metadata>
+        </Stack>
+      </Header>
+
+      <Content sx={{ px: 2 }}>
+        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+          <Tabs
+            value={activeTabIndex}
+            onChange={(event, tabIndex) => setActiveTabIndex(tabIndex)}
+          >
+            <Tab label="Data in" data-test="data-in-tab" />
+            <Tab label="Data out" data-test="data-out-tab" />
+            {hasError && <Tab label="Error" data-test="error-tab" />}
+          </Tabs>
+        </Box>
+
+        <TabPanel value={activeTabIndex} index={0}>
+          <SearchableJSONViewer data={executionStep.dataIn} />
+        </TabPanel>
+
+        <TabPanel value={activeTabIndex} index={1} data-test="data-out-panel">
+          <SearchableJSONViewer data={executionStep.dataOut} />
+        </TabPanel>
+
+        {hasError && (
+          <TabPanel value={activeTabIndex} index={2}>
+            <SearchableJSONViewer data={executionStep.errorDetails} />
+          </TabPanel>
+        )}
+      </Content>
+    </Wrapper>
+  );
+}