feat: add relative date in execution row

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

@@ -6,9 +6,10 @@ import Stack from '@mui/material/Stack';
 import CardActionArea from '@mui/material/CardActionArea';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 import { DateTime } from 'luxon';
-
 import type { IExecution } from '@automatisch/types';
+
 import * as URLS from 'config/urls';
+import useFormatMessage from 'hooks/useFormatMessage';
 import FlowAppIcons from 'components/FlowAppIcons';
 import { Apps, CardContent, Typography } from './style';
 
@@ -16,12 +17,14 @@ type ExecutionRowProps = {
   execution: IExecution;
 }
 
-const getHumanlyDate = (timestamp: number) => DateTime.fromMillis(timestamp).toLocaleString(DateTime.DATETIME_MED);
-
 export default function ExecutionRow(props: ExecutionRowProps): React.ReactElement {
+  const formatMessage = useFormatMessage();
   const { execution } = props;
   const { flow } = execution;
 
+  const createdAt = DateTime.fromMillis(parseInt(execution.createdAt, 10));
+  const relativeCreatedAt = createdAt.toRelative();
+
   return (
     <Link to={URLS.EXECUTION(execution.id)}>
       <Card sx={{ mb: 1 }}>
@@ -41,7 +44,7 @@ export default function ExecutionRow(props: ExecutionRowProps): React.ReactEleme
               </Typography>
 
               <Typography variant="caption" noWrap>
-                {getHumanlyDate(parseInt(execution.createdAt, 10))}
+                {formatMessage('execution.executedAt', { datetime: relativeCreatedAt })}
               </Typography>
             </Stack>
 

packages/web/src/locales/en.json

@@ -48,6 +48,7 @@
   "flows.create": "Create flow",
   "flows.title": "Flows",
   "executions.title": "Executions",
+  "execution.executedAt": "executed {datetime}",
   "profileSettings.title": "My Profile",
   "profileSettings.email": "Email",
   "profileSettings.updateEmail": "Update email",