refactor(web): remove typescript

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

@@ -8,14 +8,11 @@ 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 type { IApp, IExecutionStep, IStep } from 'types';
-
 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,
@@ -24,23 +21,13 @@ import {
   Metadata,
   Wrapper,
 } from './style';
-
-type ExecutionStepProps = {
-  collapsed?: boolean;
-  step: IStep;
-  index?: number;
-  executionStep: IExecutionStep;
-};
-
-function ExecutionStepId(props: Pick<IExecutionStep, 'id'>) {
+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">
@@ -49,12 +36,10 @@ function ExecutionStepId(props: Pick<IExecutionStep, 'id'>) {
     </Box>
   );
 }
-
-function ExecutionStepDate(props: Pick<IExecutionStep, 'createdAt'>) {
+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)}
@@ -67,16 +52,12 @@ function ExecutionStepDate(props: Pick<IExecutionStep, 'createdAt'>) {
     </Tooltip>
   );
 }
-
 const validIcon = <CheckCircleIcon color="success" />;
 const errorIcon = <ErrorIcon color="error" />;
-
-export default function ExecutionStep(
-  props: ExecutionStepProps
-): React.ReactElement | null {
+export default function ExecutionStep(props) {
   const { executionStep } = props;
   const [activeTabIndex, setActiveTabIndex] = React.useState(0);
-  const step: IStep = executionStep.step;
+  const step = executionStep.step;
   const isTrigger = step.type === 'trigger';
   const isAction = step.type === 'action';
   const formatMessage = useFormatMessage();
@@ -84,14 +65,11 @@ export default function ExecutionStep(
     onlyWithTriggers: isTrigger,
     onlyWithActions: isAction,
   });
-  const app = apps?.find((currentApp: IApp) => currentApp.key === step.appKey);
-
+  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>

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

@@ -1,13 +1,10 @@
 import { styled, alpha } from '@mui/material/styles';
 import Card from '@mui/material/Card';
 import Box from '@mui/material/Box';
-
 export const AppIconWrapper = styled('div')`
   display: flex;
   align-items: center;
 `;
-
-
 export const AppIconStatusIconWrapper = styled('span')`
   display: inline-flex;
   position: relative;
@@ -23,43 +20,35 @@ export const AppIconStatusIconWrapper = styled('span')`
     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, 0.8)};
   border-left: none;
   border-right: none;
   padding: ${({ theme }) => theme.spacing(2, 0)};
 `;
-
 export const Metadata = styled(Box)`
   display: grid;
   grid-template-columns: 1fr auto;
   grid-template-rows: auto auto;
   grid-template-areas:
-    "step id"
-    "step date";
+    'step id'
+    'step date';
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     grid-template-rows: auto auto auto;
     grid-template-areas:
-    "id"
-    "step"
-    "date";
+      'id'
+      'step'
+      'date';
   }
-` as typeof Box;
+`;