feat: introduce dummy flow editor

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+
+import FlowStep from 'components/FlowStep';
+import type { Flow } from 'types/flow';
+
+type EditorProps = {
+  flow?: Flow;
+}
+
+export default function Editor(props: EditorProps) {
+  const { flow } = props;
+
+  return (
+    <Box
+      display="flex"
+      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} />))}
+    </Box>
+  )
+};

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { useParams } from 'react-router-dom';
+import { useQuery } from '@apollo/client';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import IconButton from '@mui/material/IconButton';
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
+
+import Editor from 'components/Editor';
+import useFormatMessage from 'hooks/useFormatMessage';
+import { GET_FLOW } from 'graphql/queries/get-flow';
+import type { Flow } from 'types/flow';
+
+type EditorLayoutProps = {
+  children?: React.ReactNode;
+}
+
+export default function EditorLayout(props: EditorLayoutProps) {
+  const { flowId } = useParams();
+  const formatMessage = useFormatMessage();
+  const { data } = useQuery(GET_FLOW, { variables: { id: flowId }});
+  const flow: Flow = data?.getFlow;
+
+  return (
+    <>
+      <Stack direction="column" height="100%">
+        <Stack direction="row" bgcolor="white" justifyContent="space-between" alignItems="center" boxShadow={1} py={1} px={1}>
+          <Box display="flex" flex={1} alignItems="center">
+            <IconButton size="small">
+              <ArrowBackIosNewIcon fontSize="small" />
+            </IconButton>
+
+            <Typography variant="body1" noWrap sx={{ width: 300, maxWidth: '300px '}}>
+              {flow?.name}
+            </Typography>
+          </Box>
+
+          <Box pr={1}>
+            <FormControlLabel
+              control={
+                <Switch checked={false} />
+              }
+              label={formatMessage('flow.inactive')}
+              labelPlacement="start"
+            />
+          </Box>
+        </Stack>
+
+        <Box display="flex" flex="1" flexDirection="column">
+          {!flow && 'not found'}
+
+          {flow && <Editor flow={flow} />}
+        </Box>
+      </Stack>
+    </>
+  )
+}

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { Wrapper } from './style';
+
+type FlowStepProps = {
+ collapsed?: boolean;
+ step?: any;
+}
+
+export default function FlowStep(props: FlowStepProps) {
+  const { step } = props;
+
+  return (
+    <Wrapper elevation={1}>
+      {step?.type} - {step?.appKey} - {step?.key} - {step?.connectionId}
+    </Wrapper>
+  )
+};

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

@@ -0,0 +1,8 @@
+import { styled } from '@mui/material/styles';
+import Card from '@mui/material/Card';
+
+export const Wrapper = styled(Card)`
+  width: 100%;
+  padding: ${({ theme }) => theme.spacing(1, 2)};
+`;
+