feat: introduce steps in flow editor

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

@@ -19,7 +19,7 @@ export default function AppIcon(props: AppIconProps & AvatarProps) {
     <Avatar
       component="span"
       variant="square"
-      sx={{ bgcolor: color, display: 'inline-flex', width: 50, height: 50, ...sx }}
+      sx={{ bgcolor: color, display: 'flex', width: 50, height: 50, ...sx }}
       imgProps={{ style: inlineImgStyle }}
       src={url}
       alt={name}

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

@@ -5,10 +5,11 @@ import FlowStep from 'components/FlowStep';
 import type { Flow } from 'types/flow';
 
 type EditorProps = {
-  flow?: Flow;
+  flow: Flow;
 }
 
 export default function Editor(props: EditorProps) {
+  const [currentStep, setCurrentStep] = React.useState<number | null>(null);
   const { flow } = props;
 
   return (
@@ -17,13 +18,20 @@ export default function Editor(props: EditorProps) {
       flex={1}
       flexDirection="column"
       alignItems="center"
-      width={800}
-      maxWidth="100%"
       alignSelf="center"
       py={3}
       gap={2}
     >
-      {flow?.steps?.map(step => (<FlowStep key={step.id} step={step} />))}
+      {flow?.steps?.map((step, index) => (
+        <FlowStep
+          key={step.id}
+          step={step}
+          index={index + 1}
+          collapsed={currentStep !== index}
+          onOpen={() => setCurrentStep(index)}
+          onClose={() => setCurrentStep(null)}
+        />
+      ))}
     </Box>
   )
 };

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

@@ -9,6 +9,7 @@ import Switch from '@mui/material/Switch';
 import IconButton from '@mui/material/IconButton';
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
 
+import Container from 'components/Container';
 import Editor from 'components/Editor';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { GET_FLOW } from 'graphql/queries/get-flow';
@@ -33,7 +34,7 @@ export default function EditorLayout(props: EditorLayoutProps) {
               <ArrowBackIosNewIcon fontSize="small" />
             </IconButton>
 
-            <Typography variant="body1" noWrap sx={{ width: 300, maxWidth: '300px '}}>
+            <Typography variant="body1" noWrap sx={{ display: 'flex', flex: 1, maxWidth: '50vw' }}>
               {flow?.name}
             </Typography>
           </Box>
@@ -49,11 +50,11 @@ export default function EditorLayout(props: EditorLayoutProps) {
           </Box>
         </Stack>
 
-        <Box display="flex" flex="1" flexDirection="column">
+        <Container maxWidth="md">
           {!flow && 'not found'}
 
           {flow && <Editor flow={flow} />}
-        </Box>
+        </Container>
       </Stack>
     </>
   )

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

@@ -1,18 +1,58 @@
 import * as React from 'react';
+import { useQuery } from '@apollo/client';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
 
-import { Wrapper } from './style';
+import AppIcon from 'components/AppIcon';
+import { GET_APP } from 'graphql/queries/get-app';
+import useFormatMessage from 'hooks/useFormatMessage';
+import type { Step } from 'types/step';
+import { StepType } from 'types/step';
+import { Header, Wrapper } from './style';
 
 type FlowStepProps = {
   collapsed?: boolean;
- step?: any;
+  step: Step;
+  index?: number;
+  onOpen?: () => void;
+  onClose?: () => void;
 }
 
 export default function FlowStep(props: FlowStepProps) {
-  const { step } = props;
+  const { collapsed, index, step } = props;
+  const formatMessage = useFormatMessage();
+  const { data } = useQuery(GET_APP, { variables: { key: step?.appKey }})
+  const app = data?.getApp;
+
+  if  (!app) return null;
+
+  const onOpen = () => collapsed && props.onOpen?.();
+  const onClose = () => props.onClose?.();
 
   return (
-    <Wrapper elevation={1}>
-      {step?.type} - {step?.appKey} - {step?.key} - {step?.connectionId}
+    <Wrapper elevation={collapsed ? 1 : 4} onClick={onOpen}>
+      <Header borderBottom={!collapsed}>
+        <Stack direction="row" alignItems="center" gap={2}>
+          <AppIcon url={app.iconUrl} name={app.name} />
+
+          <div>
+            <Typography variant="caption">
+            {step.type === StepType.Trigger ? formatMessage('flowStep.triggerType') : formatMessage('flowStep.actionType')}
+            </Typography>
+
+            <Typography variant="body2">
+            {index}. {app.name}
+            </Typography>
+          </div>
+        </Stack>
+      </Header>
+
+      {!collapsed && (
+        <Button onClick={onClose}>
+          Close
+        </Button>
+      )}
     </Wrapper>
   )
 };

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

@@ -1,8 +1,16 @@
-import { styled } from '@mui/material/styles';
+import { styled, alpha } from '@mui/material/styles';
 import Card from '@mui/material/Card';
 
 export const Wrapper = styled(Card)`
   width: 100%;
-  padding: ${({ theme }) => theme.spacing(1, 2)};
 `;
 
+type HeaderProps = {
+  borderBottom?: boolean;
+}
+
+export const Header = styled('div', { shouldForwardProp: prop => prop !== 'borderBottom' })<HeaderProps>`
+  border-bottom: 1px solid ${({ theme, borderBottom }) => borderBottom ? alpha(theme.palette.divider, .8) : 'transparent'};
+  padding: ${({ theme }) => theme.spacing(2, 2)};
+  cursor: ${({ borderBottom }) => borderBottom ? 'unset' : 'pointer'};
+`;

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

@@ -10,7 +10,9 @@ export const GET_FLOW = gql`
         type
         key
         appKey
-        connectionId
+        connection {
+          id
+        }
       }
     }
   }

packages/web/src/locales/en.json

@@ -32,5 +32,7 @@
   "connection.addedAt": "added {datetime}",
   "createFlow.creating": "Creating a flow...",
   "flow.active": "Enabled",
-  "flow.inactive": "Disabled"
+  "flow.inactive": "Disabled",
+  "flowStep.triggerType": "Trigger",
+  "flowStep.actionType": "Action"
 }

packages/web/src/types/step.ts

@@ -1,7 +1,12 @@
+export enum StepType {
+  Trigger = 'trigger',
+  Action = 'action',
+}
+
 export type Step = {
   id: string;
   key: string;
   appKey: string;
-  type: 'trigger' | 'action';
+  type: StepType;
   connectionId: number;
 };