feat: Extend apps with further data

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

@@ -2,13 +2,16 @@ import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import Dialog from '@mui/material/Dialog';
+import type { App } from 'types/app';
 
 type AddAppConnectionProps = {
   onClose: (value: string) => void;
+  application: App;
 };
 
 export default function AddAppConnection(props: AddAppConnectionProps){
-  const { onClose } = props;
+  const { application, onClose } = props;
+  const { name } = application;
 
   return (
     <Dialog open={true} onClose={onClose}>
@@ -16,7 +19,7 @@ export default function AddAppConnection(props: AddAppConnectionProps){
 
       <DialogContent>
         <DialogContentText tabIndex={-1}>
-          Here comes the "add connection" dialog
+          Add a connection to {name}
         </DialogContentText>
       </DialogContent>
     </Dialog>

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

@@ -7,9 +7,9 @@ type AppIconProps = {
 };
 
 export default function AppIcon(props: AppIconProps) {
-  const { color = '#00adef', name, url } = props;
+  const { color, name, url } = props;
 
   return (
-    <Avatar component="span" variant="square" sx={{ bgcolor: color }} src={url} alt={name} />
+    <Avatar component="span" variant="square" sx={{ bgcolor: `#${color}` }} src={url} alt={name} />
   );
 };

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>

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { Controller, Control, FieldValues } from "react-hook-form";
+import MuiTextField from "@mui/material/TextField";
+
+type TextFieldProps = {
+  control: Control<FieldValues>;
+  name: string;
+}
+
+export default function TextField({ control, name }: TextFieldProps) {
+  return (
+    <Controller
+      name="MyCheckbox"
+      control={control}
+      defaultValue={false}
+      rules={{ required: true }}
+      render={({ field }) => <MuiTextField {...field} />}
+    />
+  );
+};