feat(ExecutionStep): show step name in execution history

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

@@ -9,6 +9,7 @@ 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 Chip from '@mui/material/Chip';
 
 import TabPanel from 'components/TabPanel';
 import SearchableJSONViewer from 'components/SearchableJSONViewer';
@@ -100,6 +101,10 @@ function ExecutionStep(props) {
 
   const hasError = !!executionStep.errorDetails;
 
+  const stepTypeName = isTrigger
+    ? formatMessage('flowStep.triggerType')
+    : formatMessage('flowStep.actionType');
+
   return (
     <Wrapper elevation={1} data-test="execution-step">
       <Header>
@@ -119,13 +124,20 @@ function ExecutionStep(props) {
             <ExecutionStepId id={executionStep.step.id} />
 
             <Box flex="1" gridArea="step">
-              <Typography variant="caption">
-                {isTrigger && formatMessage('flowStep.triggerType')}
-                {isAction && formatMessage('flowStep.actionType')}
+              <Typography
+                component={Stack}
+                direction="row"
+                variant="stepApp"
+                alignItems="center"
+                gap={0.5}
+              >
+                <Chip label={stepTypeName} variant="stepType" size="small" />
+
+                {app?.name}
               </Typography>
 
               <Typography variant="body2">
-                {step.position}. {app?.name}
+                {step.position}. {step.name}
               </Typography>
             </Box>