feat: Extend apps with further data

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

@@ -1,36 +1,32 @@
 import { Link } from 'react-router-dom';
 import Card from '@mui/material/Card';
 import Box from '@mui/material/Box';
-import Avatar from '@mui/material/Avatar';
 import CardActionArea from '@mui/material/CardActionArea';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 
 import useFormatMessage from 'hooks/useFormatMessage';
+import AppIcon from 'components/AppIcon';
+import * as URLS from 'config/urls';
+import type { App } from 'types/app';
 import { CardContent, Typography, DesktopOnlyBreakline } from './style';
 
 type AppRowProps = {
-  icon?: React.ReactNode;
-  name: string;
-  connectionNumber?: number;
-  flowNumber?: number;
-  to: string;
+  application: App;
 }
 
 const countTranslation = (value: React.ReactNode) => (<><strong>{value}</strong><DesktopOnlyBreakline /></>);
 
 function AppRow(props: AppRowProps) {
   const formatMessage = useFormatMessage();
-  const { name, to } = props;
+  const { name, primaryColor, iconUrl } = props.application;
 
   return (
-    <Link to={to}>
+    <Link to={URLS.APP(name.toLowerCase())}>
       <Card sx={{ my: 2 }}>
         <CardActionArea>
         <CardContent>
             <Box>
-              <Avatar variant="square">
-                {name[0].toUpperCase()}
-              </Avatar>
+              <AppIcon name={name} url={iconUrl} color={primaryColor} />
             </Box>
 
             <Box>