feat: introduce app flows with dummy data

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

@@ -9,8 +9,8 @@ type AppConnectionsProps = {
 }
 
 export default function AppConnections(props: AppConnectionsProps) {
-  const { appKey: key } = props;
-  const { data } = useQuery(GET_APP_CONNECTIONS, { variables: { key } });
+  const { appKey } = props;
+  const { data } = useQuery(GET_APP_CONNECTIONS, { variables: { key: appKey } });
   const appConnections: Connection[] = data?.getApp?.connections || [];
 
   return (

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

@@ -0,0 +1,53 @@
+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 useFormatMessage from 'hooks/useFormatMessage';
+import { CardContent, Typography } from './style';
+
+type AppFlowRowProps = {
+  selected?: boolean;
+  flow: any;
+}
+
+const countTranslation = (value: React.ReactNode) => (<><strong>{value}</strong><br /></>);
+
+function AppFlowRow(props: AppFlowRowProps) {
+  const formatMessage = useFormatMessage();
+
+  return (
+    <>
+      <Card sx={{ my: 2 }}>
+        <CardActionArea component={Link} to={URLS.FLOW('dummy')}>
+          <CardContent>
+            <Box>
+              <Typography variant="h6">
+                A flow
+              </Typography>
+            </Box>
+
+            <Box>
+
+            </Box>
+
+            <Box sx={{ px: 2 }}>
+              <Typography variant="body2">
+                {formatMessage('connection.flowCount', { count: countTranslation(0) })}
+              </Typography>
+            </Box>
+
+            <Box>
+              <MoreHorizIcon />
+            </Box>
+          </CardContent>
+        </CardActionArea>
+      </Card>
+    </>
+  );
+}
+
+export default AppFlowRow;

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

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

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

@@ -0,0 +1,15 @@
+import AppFlowRow from 'components/AppFlowRow';
+
+type AppFlowsProps = {
+  appKey: String;
+}
+
+export default function AppFlows(props: AppFlowsProps) {
+  return (
+    <>
+      {Array.from(new Array(3)).map((item: any, index: number) => (
+        <AppFlowRow key={index} flow={item} />
+      ))}
+    </>
+  )
+};

packages/web/src/config/urls.ts

@@ -3,14 +3,15 @@ export const APPS = '/apps';
 export const FLOWS = '/flows';
 export const EXPLORE = '/explore';
 export const APP = (appKey: string) => `/app/${appKey}`;
-export const APP_PATTERN = '/app/:key';
+export const APP_PATTERN = '/app/:appKey';
 export const APP_CONNECTIONS = (appKey: string) => `/app/${appKey}/connections`;
-export const APP_CONNECTIONS_PATTERN = '/app/:key/connections';
+export const APP_CONNECTIONS_PATTERN = '/app/:appKey/connections';
 export const APP_ADD_CONNECTION = (appKey: string) => `/app/${appKey}/connections/add`;
-export const APP_ADD_CONNECTION_PATTERN = '/app/:key/connections/add';
+export const APP_ADD_CONNECTION_PATTERN = '/app/:appKey/connections/add';
 export const APP_RECONNECT_CONNECTION = (appKey: string, connectionId: string) => `/app/${appKey}/connections/${connectionId}/reconnect`;
-export const APP_RECONNECT_CONNECTION_PATTERN = '/app/:key/connections/:connectionId/reconnect';
+export const APP_RECONNECT_CONNECTION_PATTERN = '/app/:appKey/connections/:connectionId/reconnect';
 export const APP_FLOWS = (appKey: string) => `/app/${appKey}/flows`;
-export const APP_FLOWS_PATTERN = '/app/:key/flows';
-
-export const NEW_APP_CONNECTION = '/apps/new';
+export const APP_FLOWS_PATTERN = '/app/:appKey/flows';
+export const NEW_APP_CONNECTION = '/apps/new';
+export const FLOW = (flowKey: string) => `/flows/${flowKey}`;
+export const FLOW_PATTERN = '/flows/:flowKey';

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

@@ -13,26 +13,27 @@ import { GET_APP } from 'graphql/queries/get-app';
 import * as URLS from 'config/urls';
 
 import AppConnections from 'components/AppConnections';
+import AppFlows from 'components/AppFlows';
 import AddAppConnection from 'components/AddAppConnection';
 import AppIcon from 'components/AppIcon';
 import Container from 'components/Container';
 import PageTitle from 'components/PageTitle';
 
 type ApplicationParams = {
-  key: string;
+  appKey: string;
   connectionId?: string;
 };
 
 export default function Application() {
   const formatMessage = useFormatMessage();
   const routeMatch = useRouteMatch([URLS.APP_CONNECTIONS_PATTERN, URLS.APP_FLOWS_PATTERN, URLS.APP_PATTERN]);
-  const { key } = useParams<ApplicationParams>();
+  const { appKey } = useParams<ApplicationParams>();
   const history = useHistory();
-  const { data } = useQuery(GET_APP, { variables: { key } });
+  const { data } = useQuery(GET_APP, { variables: { key: appKey } });
 
   const app = data?.getApp || {};
 
-  const goToApplicationPage = () => history.push(URLS.APP(key));
+  const goToApplicationPage = () => history.push(URLS.APP(appKey));
 
   return (
     <>
@@ -52,7 +53,7 @@ export default function Application() {
                 <SettingsIcon />
               </IconButton>
 
-              <Button variant="contained" component={Link} to={URLS.APP_ADD_CONNECTION(key)}>
+              <Button variant="contained" component={Link} to={URLS.APP_ADD_CONNECTION(appKey)}>
                 {formatMessage('app.addConnection')}
               </Button>
             </Grid>
@@ -64,14 +65,14 @@ export default function Application() {
                 <Tabs value={routeMatch?.path}>
                   <Tab
                     label={formatMessage('app.connections')}
-                    to={URLS.APP_CONNECTIONS(key)}
+                    to={URLS.APP_CONNECTIONS(appKey)}
                     value={URLS.APP_CONNECTIONS_PATTERN}
                     component={Link}
                   />
 
                   <Tab
                     label={formatMessage('app.flows')}
-                    to={URLS.APP_FLOWS(key)}
+                    to={URLS.APP_FLOWS(appKey)}
                     value={URLS.APP_FLOWS_PATTERN}
                     component={Link}
                   />
@@ -80,15 +81,15 @@ export default function Application() {
 
               <Switch>
                 <Route path={URLS.APP_FLOWS_PATTERN}>
-                  Flows
+                  <AppFlows appKey={appKey} />
                 </Route>
 
                 <Route path={URLS.APP_CONNECTIONS_PATTERN}>
-                  <AppConnections appKey={key} />
+                  <AppConnections appKey={appKey} />
                 </Route>
 
                 <Route exact path={URLS.APP_PATTERN}>
-                  <Redirect to={URLS.APP_CONNECTIONS(key)} />
+                  <Redirect to={URLS.APP_CONNECTIONS(appKey)} />
                 </Route>
               </Switch>
             </Grid>