feat: add dynamic flow app icons

packages/backend/src/models/step.ts

@@ -73,6 +73,8 @@ class Step extends Base {
   });
 
   get iconUrl() {
+    if (!this.appKey) return null;
+
     return `${appConfig.baseUrl}/apps/${this.appKey}/assets/favicon.svg`;
   }
 

packages/types/index.d.ts

@@ -45,6 +45,7 @@ export interface IStep {
   flowId: string;
   key: string;
   appKey: string;
+  iconUrl: string;
   type: 'action' | 'trigger';
   connectionId: string;
   status: string;

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

@@ -14,7 +14,16 @@ const inlineImgStyle: React.CSSProperties = {
 };
 
 export default function AppIcon(props: AppIconProps & AvatarProps): React.ReactElement {
-  const { name, url, color, sx = {}, variant = "square", ...restProps } = props;
+  const {
+    name,
+    url,
+    color,
+    sx = {},
+    variant = "square",
+    ...restProps
+  } = props;
+
+  const initialLetter = name?.[0];
 
   return (
     <Avatar
@@ -24,6 +33,7 @@ export default function AppIcon(props: AppIconProps & AvatarProps): React.ReactE
       imgProps={{ style: inlineImgStyle }}
       src={url}
       alt={name}
+      children={initialLetter}
       {...restProps}
     />
   );

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

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import type { IStep } from '@automatisch/types';
+
+import AppIcon from 'components/AppIcon';
+import IntermediateStepCount from 'components/IntermediateStepCount';
+
+type FlowAppIconsProps = {
+  steps: Partial<IStep>[];
+}
+
+export default function FlowAppIcons(props: FlowAppIconsProps) {
+  const { steps } = props;
+  const stepsCount = steps.length;
+  const firstStep = steps[0];
+  const lastStep = steps[stepsCount - 1];
+  const intermeaditeStepCount = stepsCount - 2;
+
+
+  return (
+    <>
+      <AppIcon
+        name=" "
+        variant="rounded"
+        url={firstStep.iconUrl}
+        imgProps={{ width: 30, height: 30}}
+      />
+
+      {intermeaditeStepCount > 0 && <IntermediateStepCount count={intermeaditeStepCount} />}
+
+      <AppIcon
+        name=" "
+        variant="rounded"
+        url={lastStep.iconUrl}
+      />
+    </>
+  )
+};

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

@@ -7,8 +7,7 @@ import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import { DateTime } from 'luxon';
 
 import type { IFlow } from '@automatisch/types';
-import IntermediateStepCount from 'components/IntermediateStepCount';
+import FlowAppIcons from 'components/FlowAppIcons';
-import AppIcon from 'components/AppIcon';
 import FlowContextMenu from 'components/FlowContextMenu';
 import useFormatMessage from 'hooks/useFormatMessage';
 import * as URLS from 'config/urls';
@@ -46,21 +45,7 @@ export default function FlowRow(props: FlowRowProps): React.ReactElement {
         <CardActionArea component={Link} to={URLS.FLOW(flow.id)}>
           <CardContent>
             <Apps direction="row" gap={1} sx={{gridArea:"apps"}}>
-              <AppIcon
+              <FlowAppIcons steps={flow.steps} />
-                name="Twitter"
-                color="lightpink"
-                variant="rounded"
-                url="httpss://via.placeholder.com/50"
-              />
-
-              <IntermediateStepCount count={99} />
-
-              <AppIcon
-                name="Github"
-                color="lightpink"
-                variant="rounded"
-                url="httpss://via.placeholder.com/50"
-              />
             </Apps>
 
             <Title

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

@@ -12,7 +12,7 @@ export default function IntermediateStepCount(props: IntermediateStepCountProps)
 
   return (
     <Container>
-      <Typography variant="body2">
+      <Typography variant="subtitle1" sx={{ }}>
         +{count}
       </Typography>
     </Container>

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

@@ -7,6 +7,6 @@ export const Container = styled('div')(({ theme }) => ({
   alignItems: 'center',
   minWidth: 50,
   height: 50,
-  border: '1px solid #000',
+  border: `1px solid ${theme.palette.text.disabled}`,
   borderRadius: theme.shape.borderRadius,
 }));

packages/web/src/graphql/queries/get-flows.ts

@@ -13,6 +13,9 @@ export const GET_FLOWS = gql`
           name
           createdAt
           updatedAt
+          steps {
+            iconUrl
+          }
         }
       }
     }