feat(executions): display execution step id (#1232)

* feat(executions): display execution step id

* refactor: remove conditional components in execution steps

---------

Co-authored-by: Ali BARIN <ali.barin53@gmail.com>

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

@@ -6,6 +6,8 @@ import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import type { IExecution } from '@automatisch/types';
 
+import useFormatMessage from 'hooks/useFormatMessage';
+
 type ExecutionHeaderProps = {
   execution: IExecution;
 };
@@ -19,13 +21,18 @@ function ExecutionName(props: Pick<IExecution['flow'], 'name'>) {
 }
 
 function ExecutionId(props: Pick<IExecution, 'id'>) {
+  const formatMessage = useFormatMessage();
+
+  const id = (
+    <Typography variant="body1" component="span">
+      {props.id}
+    </Typography>
+  );
+
   return (
     <Box sx={{ display: 'flex' }}>
       <Typography variant="body2">
-        Execution ID:{' '}
-        <Typography variant="body1" component="span">
-          {props.id}
-        </Typography>
+        {formatMessage('execution.id', { id })}
       </Typography>
     </Box>
   );