feat: introduce dynamic flow data

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

@@ -10,7 +10,6 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import { CardContent, Typography } from './style';
 
 type AppFlowRowProps = {
-  selected?: boolean;
   flow: any;
 }
 
@@ -18,6 +17,7 @@ const countTranslation = (value: React.ReactNode) => (<><strong>{value}</strong>
 
 function AppFlowRow(props: AppFlowRowProps) {
   const formatMessage = useFormatMessage();
+  const { flow } = props;
 
   return (
     <>
@@ -26,17 +26,7 @@ function AppFlowRow(props: AppFlowRowProps) {
           <CardContent>
             <Box>
               <Typography variant="h6">
-                A flow
+                {flow.name}
-              </Typography>
-            </Box>
-
-            <Box>
-
-            </Box>
-
-            <Box sx={{ px: 2 }}>
-              <Typography variant="body2">
-                {formatMessage('connection.flowCount', { count: countTranslation(0) })}
               </Typography>
             </Box>
 

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

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

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

@@ -1,14 +1,21 @@
+import { useQuery } from '@apollo/client';
+import { GET_FLOWS } from 'graphql/queries/get-flows';
+
 import AppFlowRow from 'components/AppFlowRow';
+import type { Flow } from 'types/flow';
 
 type AppFlowsProps = {
   appKey: String;
 }
 
 export default function AppFlows(props: AppFlowsProps) {
+  const { data } = useQuery(GET_FLOWS);
+  const appFlows: Flow[] = data?.getFlows || [];
+
   return (
     <>
-      {Array.from(new Array(3)).map((item: any, index: number) => (
+      {appFlows.map((appFlow: Flow) => (
-        <AppFlowRow key={index} flow={item} />
+        <AppFlowRow key={appFlow.id} flow={appFlow} />
       ))}
     </>
   )

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

@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client';
+
+export const GET_FLOWS = gql`
+  query GetFlows {
+    getFlows {
+      id
+      name
+    }
+  }
+`;

packages/web/src/types/flow.ts

@@ -0,0 +1,4 @@
+export type Flow = {
+  id: string;
+  name: string;
+};