diff --git a/packages/web/src/components/AppConnections/index.tsx b/packages/web/src/components/AppConnections/index.tsx
index 02095a98..5e32b759 100644
--- a/packages/web/src/components/AppConnections/index.tsx
+++ b/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 (
diff --git a/packages/web/src/components/AppFlowRow/index.tsx b/packages/web/src/components/AppFlowRow/index.tsx
new file mode 100644
index 00000000..fb60610b
--- /dev/null
+++ b/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) => (<>{value}
);
+
+function AppFlowRow(props: AppFlowRowProps) {
+ const formatMessage = useFormatMessage();
+
+ return (
+ <>
+
+
+
+
+
+ A flow
+
+
+
+
+
+
+
+
+
+ {formatMessage('connection.flowCount', { count: countTranslation(0) })}
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default AppFlowRow;
diff --git a/packages/web/src/components/AppFlowRow/style.ts b/packages/web/src/components/AppFlowRow/style.ts
new file mode 100644
index 00000000..30f9967b
--- /dev/null
+++ b/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',
+}));
diff --git a/packages/web/src/components/AppFlows/index.tsx b/packages/web/src/components/AppFlows/index.tsx
new file mode 100644
index 00000000..ebc06cff
--- /dev/null
+++ b/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) => (
+
+ ))}
+
+ )
+};
diff --git a/packages/web/src/config/urls.ts b/packages/web/src/config/urls.ts
index b9def6a6..05cfa5d9 100644
--- a/packages/web/src/config/urls.ts
+++ b/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';
\ No newline at end of file
+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';
\ No newline at end of file
diff --git a/packages/web/src/pages/Application/index.tsx b/packages/web/src/pages/Application/index.tsx
index 12bc4ca0..fd4f445f 100644
--- a/packages/web/src/pages/Application/index.tsx
+++ b/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();
+ const { appKey } = useParams();
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() {
-