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>
   );

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

@@ -21,6 +21,7 @@ import {
   AppIconStatusIconWrapper,
   Content,
   Header,
+  Metadata,
   Wrapper,
 } from './style';
 
@@ -31,6 +32,24 @@ type ExecutionStepProps = {
   executionStep: IExecutionStep;
 };
 
+function ExecutionStepId(props: Pick<IExecutionStep, 'id'>) {
+  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: Pick<IExecutionStep, 'createdAt'>) {
   const formatMessage = useFormatMessage();
   const createdAt = DateTime.fromMillis(parseInt(props.createdAt, 10));
@@ -76,30 +95,37 @@ export default function ExecutionStep(
   return (
     <Wrapper elevation={1} data-test="execution-step">
       <Header>
-        <Stack direction="row" gap={2}>
+        <Stack direction="row" gap={3}>
           <AppIconWrapper>
-            <AppIcon url={app?.iconUrl} name={app?.name} />
-
             <AppIconStatusIconWrapper>
+              <AppIcon url={app?.iconUrl} name={app?.name} />
+
               {validationStatusIcon}
             </AppIconStatusIconWrapper>
           </AppIconWrapper>
 
-          <Box flex="1">
-            <Typography variant="caption">
-              {isTrigger
-                ? formatMessage('flowStep.triggerType')
-                : formatMessage('flowStep.actionType')}
-            </Typography>
+          <Metadata flex="1">
+            <ExecutionStepId id={executionStep.step.id} />
 
-            <Typography variant="body2">
-              {step.position}. {app?.name}
-            </Typography>
-          </Box>
+            <Box flex="1" gridArea="step">
+              <Typography variant="caption">
+                {isTrigger && formatMessage('flowStep.triggerType')}
+                {isAction && formatMessage('flowStep.actionType')}
+              </Typography>
 
-          <Box alignSelf="flex-end">
-            <ExecutionStepDate createdAt={executionStep.createdAt} />
-          </Box>
+              <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>
 

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

@@ -1,18 +1,22 @@
 import { styled, alpha } from '@mui/material/styles';
 import Card from '@mui/material/Card';
+import Box from '@mui/material/Box';
 
 export const AppIconWrapper = styled('div')`
-  position: relative;
+  display: flex;
+  align-items: center;
 `;
 
+
 export const AppIconStatusIconWrapper = styled('span')`
-  position: absolute;
-  right: 0;
-  top: 0;
-  transform: translate(50%, -50%);
   display: inline-flex;
+  position: relative;
 
   svg {
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translate(50%, -50%);
     // to make it distinguishable over an app icon
     background: white;
     border-radius: 100%;
@@ -31,7 +35,7 @@ type HeaderProps = {
 
 export const Header = styled('div', {
   shouldForwardProp: (prop) => prop !== 'collapsed',
-})<HeaderProps>`
+}) <HeaderProps>`
   padding: ${({ theme }) => theme.spacing(2)};
   cursor: ${({ collapsed }) => (collapsed ? 'pointer' : 'unset')};
 `;
@@ -42,3 +46,20 @@ export const Content = styled('div')`
   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";
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    grid-template-rows: auto auto auto;
+    grid-template-areas:
+    "id"
+    "step"
+    "date";
+  }
+` as typeof Box;

packages/web/src/locales/en.json

@@ -86,12 +86,14 @@
   "flowEditor.goBack": "Go back to flows",
   "executions.title": "Executions",
   "executions.noExecutions": "There is no execution data point to show.",
+  "execution.id": "Execution ID: {id}",
   "execution.updatedAt": "updated {datetime}",
   "execution.test": "Test run",
   "execution.statusSuccess": "Success",
   "execution.statusFailure": "Failure",
   "execution.noDataTitle": "No data",
   "execution.noDataMessage": "We successfully ran the execution, but there was no new data to process.",
+  "executionStep.id": "ID: {id}",
   "executionStep.executedAt": "executed {datetime}",
   "profileSettings.title": "My Profile",
   "profileSettings.fullName": "Full name",