feat: introduce basic flows page

packages/web/src/pages/Flows/index.tsx

@@ -1,11 +1,71 @@
+import * as React from 'react';
+import { Link, Routes, Route, useNavigate } from 'react-router-dom';
+import type { LinkProps } from 'react-router-dom';
+import { useQuery } from '@apollo/client';
 import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import AddIcon from '@mui/icons-material/Add';
+
+import FlowRow from 'components/FlowRow';
+import ConditionalIconButton from 'components/ConditionalIconButton';
 import Container from 'components/Container';
+import PageTitle from 'components/PageTitle';
+import SearchInput from 'components/SearchInput';
+import useFormatMessage from 'hooks/useFormatMessage'
+import { GET_FLOWS } from 'graphql/queries/get-flows';
+import * as URLS from 'config/urls';
+import type { Flow } from 'types/flow';
 
 export default function Flows() {
+  const formatMessage = useFormatMessage();
+  const [flowName, setFlowName] = React.useState('');
+  const { data } = useQuery(GET_FLOWS);
+
+  const flows: Flow[] = data?.getFlows?.filter((flow: Flow) => flow.name?.toLowerCase().includes(flowName.toLowerCase()));
+
+  const onSearchChange = React.useCallback((event) => {
+    setFlowName(event.target.value);
+  }, []);
+
+  const CreateFlowLink = React.useMemo(
+    () =>
+      React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(function InlineLink(
+        linkProps,
+        ref,
+      ) {
+        return <Link ref={ref} to={URLS.CREATE_FLOW} {...linkProps} />;
+      }),
+    [],
+  );
+
   return (
     <Box sx={{ py: 3 }}>
       <Container>
-        Flows
+        <Grid container sx={{ mb: [2, 5] }} columnSpacing={1.5} rowSpacing={3}>
+          <Grid container item xs sm alignItems="center" order={{ xs: 0 }}>
+            <PageTitle>{formatMessage('flows.title')}</PageTitle>
+          </Grid>
+
+          <Grid item xs={12} sm="auto" order={{ xs: 2, sm: 1 }}>
+            <SearchInput onChange={onSearchChange} />
+          </Grid>
+
+          <Grid container item xs="auto" sm="auto" alignItems="center" order={{ xs: 1, sm: 2 }}>
+            <ConditionalIconButton
+              type="submit"
+              variant="contained"
+              color="primary"
+              size="large"
+              component={CreateFlowLink}
+              fullWidth
+              icon={<AddIcon />}
+            >
+              {formatMessage('flows.create')}
+            </ConditionalIconButton>
+          </Grid>
+        </Grid>
+
+        {flows?.map((flow) => (<FlowRow key={flow.id} flow={flow} />))}
       </Container>
     </Box>
   );