From c94b8af821184f79ac1fbf2f486335192d6ed67f Mon Sep 17 00:00:00 2001 From: Ali BARIN Date: Sat, 23 Oct 2021 01:03:13 +0200 Subject: [PATCH] feat: introduce app flows with dummy data --- .../src/components/AppConnections/index.tsx | 4 +- .../web/src/components/AppFlowRow/index.tsx | 53 +++++++++++++++++++ .../web/src/components/AppFlowRow/style.ts | 17 ++++++ .../web/src/components/AppFlows/index.tsx | 15 ++++++ packages/web/src/config/urls.ts | 15 +++--- packages/web/src/pages/Application/index.tsx | 21 ++++---- 6 files changed, 106 insertions(+), 19 deletions(-) create mode 100644 packages/web/src/components/AppFlowRow/index.tsx create mode 100644 packages/web/src/components/AppFlowRow/style.ts create mode 100644 packages/web/src/components/AppFlows/index.tsx 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() { - @@ -64,14 +65,14 @@ export default function Application() { @@ -80,15 +81,15 @@ export default function Application() { - Flows + - + - +