feat: introduce app flows with dummy data

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

@@ -9,8 +9,8 @@ type AppConnectionsProps = {
 }
 
 export default function AppConnections(props: AppConnectionsProps) {
-  const { appKey: key } = props;
-  const { data } = useQuery(GET_APP_CONNECTIONS, { variables: { key } });
+  const { appKey } = props;
+  const { data } = useQuery(GET_APP_CONNECTIONS, { variables: { key: appKey } });
   const appConnections: Connection[] = data?.getApp?.connections || [];
 
   return (

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

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import Card from '@mui/material/Card';
+import Box from '@mui/material/Box';
+import CardActionArea from '@mui/material/CardActionArea';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+
+import * as URLS from 'config/urls';
+import useFormatMessage from 'hooks/useFormatMessage';
+import { CardContent, Typography } from './style';
+
+type AppFlowRowProps = {
+  selected?: boolean;
+  flow: any;
+}
+
+const countTranslation = (value: React.ReactNode) => (<><strong>{value}</strong><br /></>);
+
+function AppFlowRow(props: AppFlowRowProps) {
+  const formatMessage = useFormatMessage();
+
+  return (
+    <>
+      <Card sx={{ my: 2 }}>
+        <CardActionArea component={Link} to={URLS.FLOW('dummy')}>
+          <CardContent>
+            <Box>
+              <Typography variant="h6">
+                A flow
+              </Typography>
+            </Box>
+
+            <Box>
+
+            </Box>
+
+            <Box sx={{ px: 2 }}>
+              <Typography variant="body2">
+                {formatMessage('connection.flowCount', { count: countTranslation(0) })}
+              </Typography>
+            </Box>
+
+            <Box>
+              <MoreHorizIcon />
+            </Box>
+          </CardContent>
+        </CardActionArea>
+      </Card>
+    </>
+  );
+}
+
+export default AppFlowRow;

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

@@ -0,0 +1,17 @@
+import { styled } from '@mui/material/styles';
+import MuiCardContent from '@mui/material/CardContent';
+import MuiTypography from '@mui/material/Typography';
+
+export const CardContent = styled(MuiCardContent)(({ theme }) => ({
+  display: 'grid',
+  gridTemplateRows: 'auto',
+  gridTemplateColumns: '1fr auto auto auto',
+  gridColumnGap: theme.spacing(2),
+  alignItems: 'center',
+}));
+
+
+export const Typography = styled(MuiTypography)(({ theme }) => ({
+  textAlign: 'center',
+  display: 'inline-block',
+}));

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

@@ -0,0 +1,15 @@
+import AppFlowRow from 'components/AppFlowRow';
+
+type AppFlowsProps = {
+  appKey: String;
+}
+
+export default function AppFlows(props: AppFlowsProps) {
+  return (
+    <>
+      {Array.from(new Array(3)).map((item: any, index: number) => (
+        <AppFlowRow key={index} flow={item} />
+      ))}
+    </>
+  )
+};