feat: Extend apps with further data

packages/web/package.json

@@ -19,6 +19,7 @@
     "graphql": "^15.6.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-hook-form": "^7.17.2",
     "react-intl": "^5.20.12",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",

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} />}
+    />
+  );
+};

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

@@ -6,6 +6,7 @@ export const GET_APP = gql`
       name
       iconUrl
       docUrl
+      primaryColor
       fields {
         key
         label

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

@@ -2,6 +2,22 @@ import { gql } from '@apollo/client';
 
 export const GET_APPS = gql`
   query GetApps($name: String) {
-    getApps(name: $name)
+    getApps(name: $name) {
+      name
+      iconUrl
+      docUrl
+      primaryColor
+      fields {
+        key
+        label
+        type
+        required
+        readOnly
+        placeholder
+        description
+        docUrl
+        clickToCopy
+      }
+    }
   }
 `;

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

@@ -38,7 +38,7 @@ export default function Application() {
         <Container>
           <Grid container sx={{ mb: 3 }}>
             <Grid item xs="auto" sx={{ mr: 1.5 }}>
-              <AppIcon url={app.iconUrl} name={app.name} />
+              <AppIcon url={app.iconUrl} color={app.primaryColor} name={app.name} />
             </Grid>
 
             <Grid item xs>
@@ -95,7 +95,7 @@ export default function Application() {
       </Box>
 
       <Route exact path={URLS.APP_ADD_CONNECTION_PATTERN}>
-        <AddAppConnection onClose={goToApplicationPage} />
+        <AddAppConnection onClose={goToApplicationPage} application={app} />
       </Route>
     </>
   );

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

@@ -8,8 +8,8 @@ import PageTitle from 'components/PageTitle';
 import AppRow from 'components/AppRow';
 import SearchInput from 'components/SearchInput';
 import * as URLS from 'config/urls';
-
 import { GET_APPS } from 'graphql/queries/get-apps';
+import type { App } from 'types/app';
 
 export default function Applications() {
   const [appName, setAppName] = useState(null);
@@ -32,8 +32,8 @@ export default function Applications() {
           </Grid>
         </Grid>
 
-        {data?.getApps?.map((name: string) => (
-          <AppRow key={name} name={name} to={URLS.APP(name)} />
+        {data?.getApps?.map((app: App) => (
+          <AppRow key={app.name} application={app} />
         ))}
       </Container>
     </Box>

packages/web/src/types/app.ts

@@ -0,0 +1,21 @@
+type AppFields = {
+  key: string;
+  label: string;
+  type: string;
+  required: boolean,
+  readOnly: boolean,
+  placeholder: string;
+  description: string;
+  docUrl: string;
+  clickToCopy: boolean,
+};
+
+type App = {
+  name: string;
+  iconUrl: string;
+  docUrl: string;
+  primaryColor: string;
+  fields: AppFields;
+};
+
+export type { App, AppFields };