From fc681d9ebc295ecb9b96a0dda50e483ced6cab5f Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Sun, 7 Aug 2022 14:50:16 +0200
Subject: [PATCH 1/2] feat: add flow app icons in execution row

---
 .../src/graphql/queries/get-executions.ts     |  6 +++++-
 .../web/src/components/ExecutionRow/index.tsx |  7 ++++++-
 .../web/src/components/ExecutionRow/style.ts  | 19 +++++++++++++++++--
 .../web/src/graphql/queries/get-executions.ts |  3 +++
 4 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/packages/backend/src/graphql/queries/get-executions.ts b/packages/backend/src/graphql/queries/get-executions.ts
index 2d41d722..068fb36b 100644
--- a/packages/backend/src/graphql/queries/get-executions.ts
+++ b/packages/backend/src/graphql/queries/get-executions.ts
@@ -13,7 +13,11 @@ const getExecutions = async (
 ) => {
   const executions = context.currentUser
     .$relatedQuery('executions')
-    .withGraphFetched('flow')
+    .withGraphFetched({
+      flow: {
+        steps: true
+      }
+    })
     .orderBy('created_at', 'desc');
 
   return paginate(executions, params.limit, params.offset);
diff --git a/packages/web/src/components/ExecutionRow/index.tsx b/packages/web/src/components/ExecutionRow/index.tsx
index 01db1847..5e3652b1 100644
--- a/packages/web/src/components/ExecutionRow/index.tsx
+++ b/packages/web/src/components/ExecutionRow/index.tsx
@@ -9,7 +9,8 @@ import { DateTime } from 'luxon';
 
 import type { IExecution } from '@automatisch/types';
 import * as URLS from 'config/urls';
-import { CardContent, Typography } from './style';
+import FlowAppIcons from 'components/FlowAppIcons';
+import { Apps, CardContent, Typography } from './style';
 
 type ExecutionRowProps = {
   execution: IExecution;
@@ -26,6 +27,10 @@ export default function ExecutionRow(props: ExecutionRowProps): React.ReactEleme
       <Card sx={{ mb: 1 }}>
         <CardActionArea>
           <CardContent>
+            <Apps direction="row" gap={1} sx={{gridArea:"apps"}}>
+              <FlowAppIcons steps={flow.steps} />
+            </Apps>
+
             <Stack
               justifyContent="center"
               alignItems="flex-start"
diff --git a/packages/web/src/components/ExecutionRow/style.ts b/packages/web/src/components/ExecutionRow/style.ts
index c392df8b..052482c6 100644
--- a/packages/web/src/components/ExecutionRow/style.ts
+++ b/packages/web/src/components/ExecutionRow/style.ts
@@ -1,15 +1,30 @@
 import { styled } from '@mui/material/styles';
 import MuiCardContent from '@mui/material/CardContent';
+import MuiStack from '@mui/material/Stack';
 import MuiTypography from '@mui/material/Typography';
 
 export const CardContent = styled(MuiCardContent)(({ theme }) => ({
   display: 'grid',
   gridTemplateRows: 'auto',
-  gridTemplateColumns: '1fr auto',
-  gridColumnGap: theme.spacing(2),
+  gridTemplateColumns: 'calc(30px * 3 + 8px * 2) minmax(0, auto) min-content',
+  gridGap: theme.spacing(2),
+  gridTemplateAreas: `
+    "apps title menu"
+  `,
   alignItems: 'center',
+  [theme.breakpoints.down('sm')]: {
+    gridTemplateAreas: `
+      "apps menu"
+      "title menu"
+    `,
+    gridTemplateColumns: 'minmax(0, auto) min-content',
+    gridTemplateRows: 'auto auto',
+  }
 }));
 
+export const Apps = styled(MuiStack)(() => ({
+  gridArea: 'apps',
+}));
 
 export const Typography = styled(MuiTypography)(() => ({
   display: 'inline-block',
diff --git a/packages/web/src/graphql/queries/get-executions.ts b/packages/web/src/graphql/queries/get-executions.ts
index 1241ad35..1c015677 100644
--- a/packages/web/src/graphql/queries/get-executions.ts
+++ b/packages/web/src/graphql/queries/get-executions.ts
@@ -17,6 +17,9 @@ export const GET_EXECUTIONS = gql`
             id
             name
             active
+            steps {
+              iconUrl
+            }
           }
         }
       }

From 3c926adecae932812c98dbbd06b8e848fd13770a Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Sun, 7 Aug 2022 14:56:05 +0200
Subject: [PATCH 2/2] feat: add relative date in execution row

---
 packages/web/src/components/ExecutionRow/index.tsx | 11 +++++++----
 packages/web/src/locales/en.json                   |  1 +
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/components/ExecutionRow/index.tsx b/packages/web/src/components/ExecutionRow/index.tsx
index 5e3652b1..ae2038b6 100644
--- a/packages/web/src/components/ExecutionRow/index.tsx
+++ b/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>
 
diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json
index 5e75c89f..629d9b4c 100644
--- a/packages/web/src/locales/en.json
+++ b/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",