refactor: unify flow rows

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

@@ -1,39 +0,0 @@
-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 { CardContent, Typography } from './style';
-
-type AppFlowRowProps = {
-  flow: any;
-}
-
-function AppFlowRow(props: AppFlowRowProps): React.ReactElement {
-  const { flow } = props;
-
-  return (
-    <>
-      <Card sx={{ my: 2 }}>
-        <CardActionArea component={Link} to={URLS.FLOW(flow.id)}>
-          <CardContent>
-            <Box>
-              <Typography variant="h6" noWrap>
-                {flow.name}
-              </Typography>
-            </Box>
-
-            <Box>
-              <MoreHorizIcon />
-            </Box>
-          </CardContent>
-        </CardActionArea>
-      </Card>
-    </>
-  );
-}
-
-export default AppFlowRow;

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

@@ -1,18 +0,0 @@
-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',
-  gridColumnGap: theme.spacing(2),
-  alignItems: 'center',
-}));
-
-
-export const Typography = styled(MuiTypography)(() => ({
-  display: 'inline-block',
-  width: 300,
-  maxWidth: '50%',
-}));

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

@@ -1,7 +1,7 @@
 import { useQuery } from '@apollo/client';
 import { GET_FLOWS } from 'graphql/queries/get-flows';
 
-import AppFlowRow from 'components/AppFlowRow';
+import AppFlowRow from 'components/FlowRow';
 import type { IFlow } from '@automatisch/types';
 
 type AppFlowsProps = {