From 430f0d07e8546f32ee19f332e57b18ef4a8d2ea5 Mon Sep 17 00:00:00 2001 From: Ali BARIN Date: Wed, 5 Jan 2022 21:36:51 +0100 Subject: [PATCH] feat: introduce basic flows page --- .../web/src/components/AppFlowRow/index.tsx | 2 +- packages/web/src/components/FlowRow/index.tsx | 38 ++++++++++++ packages/web/src/components/FlowRow/style.ts | 27 ++++++++ packages/web/src/config/urls.ts | 11 ++-- packages/web/src/locales/en.json | 7 ++- packages/web/src/pages/Flow/index.tsx | 45 ++++++++++++++ packages/web/src/pages/Flows/index.tsx | 62 ++++++++++++++++++- packages/web/src/routes.tsx | 3 + 8 files changed, 186 insertions(+), 9 deletions(-) create mode 100644 packages/web/src/components/FlowRow/index.tsx create mode 100644 packages/web/src/components/FlowRow/style.ts create mode 100644 packages/web/src/pages/Flow/index.tsx diff --git a/packages/web/src/components/AppFlowRow/index.tsx b/packages/web/src/components/AppFlowRow/index.tsx index 435e4343..6dce387b 100644 --- a/packages/web/src/components/AppFlowRow/index.tsx +++ b/packages/web/src/components/AppFlowRow/index.tsx @@ -18,7 +18,7 @@ function AppFlowRow(props: AppFlowRowProps) { return ( <> - + diff --git a/packages/web/src/components/FlowRow/index.tsx b/packages/web/src/components/FlowRow/index.tsx new file mode 100644 index 00000000..84de9e7d --- /dev/null +++ b/packages/web/src/components/FlowRow/index.tsx @@ -0,0 +1,38 @@ +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 ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'; + +import type { Flow } from 'types/flow'; +import * as URLS from 'config/urls'; +import { CardContent, Typography } from './style'; + +type FlowRowProps = { + flow: Flow; +} + +export default function FlowRow(props: FlowRowProps) { + const { flow } = props; + + return ( + + + + + + + {flow.name} + + + + + theme.palette.primary.main }} /> + + + + + + ); +} \ No newline at end of file diff --git a/packages/web/src/components/FlowRow/style.ts b/packages/web/src/components/FlowRow/style.ts new file mode 100644 index 00000000..1e3210d6 --- /dev/null +++ b/packages/web/src/components/FlowRow/style.ts @@ -0,0 +1,27 @@ +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', + gridColumnGap: theme.spacing(2), + alignItems: 'center', +})); + + +export const Typography = styled(MuiTypography)(({ theme }) => ({ + '&.MuiTypography-h6': { + textTransform: 'capitalize', + }, + display: 'inline-block', + width: 500, + maxWidth: '70%', +})); + +export const DesktopOnlyBreakline = styled('br')(({ theme }) => ({ + [theme.breakpoints.down('sm')]: { + display: 'none', + } +})); diff --git a/packages/web/src/config/urls.ts b/packages/web/src/config/urls.ts index b17322ac..70532979 100644 --- a/packages/web/src/config/urls.ts +++ b/packages/web/src/config/urls.ts @@ -1,9 +1,9 @@ export const DASHBOARD = '/dashboard'; -export const APPS = '/apps'; export const CONNECTIONS = '/connections'; -export const FLOWS = '/flows'; export const EXPLORE = '/explore'; -export const EDITOR = '/editor'; + +export const APPS = '/apps'; +export const NEW_APP_CONNECTION = '/apps/new'; export const APP = (appKey: string) => `/app/${appKey}`; export const APP_PATTERN = '/app/:appKey'; export const APP_CONNECTIONS = (appKey: string) => `/app/${appKey}/connections`; @@ -14,8 +14,11 @@ export const APP_RECONNECT_CONNECTION = (appKey: string, connectionId: string) = 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/:appKey/flows'; -export const NEW_APP_CONNECTION = '/apps/new'; + +export const EDITOR = '/editor'; export const CREATE_FLOW = '/editor/create'; export const FLOW_EDITOR = (flowId: string) => `/editor/${flowId}`; + +export const FLOWS = '/flows'; export const FLOW = (flowId: string) => `/flows/${flowId}`; export const FLOW_PATTERN = '/flows/:flowId'; diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json index 6fc20bf1..5268c1b0 100644 --- a/packages/web/src/locales/en.json +++ b/packages/web/src/locales/en.json @@ -1,7 +1,6 @@ { "brandText": "Automatisch", "searchPlaceholder": "Search", - "welcomeText": "Here comes the dashboard homepage.", "drawer.dashboard": "Dashboard", "drawer.flows": "Flows", "drawer.apps": "My Apps", @@ -15,7 +14,7 @@ "app.noConnections": "You don't have any connections yet.", "app.flows": "Flows", "app.noFlows": "You don't have any flows yet.", - "apps.title": "My Apps", + "apps.title": "Apps", "apps.addConnection": "Add connection", "apps.addNewAppConnection": "Add a new app connection", "apps.searchApp": "Search for app", @@ -34,5 +33,7 @@ "flow.active": "Enabled", "flow.inactive": "Disabled", "flowStep.triggerType": "Trigger", - "flowStep.actionType": "Action" + "flowStep.actionType": "Action", + "flows.create": "Create flow", + "flows.title": "Flows" } \ No newline at end of file diff --git a/packages/web/src/pages/Flow/index.tsx b/packages/web/src/pages/Flow/index.tsx new file mode 100644 index 00000000..e329bde0 --- /dev/null +++ b/packages/web/src/pages/Flow/index.tsx @@ -0,0 +1,45 @@ +import * as React from 'react'; +import { useQuery } from '@apollo/client'; +import { Link, Route, Navigate, Routes, useParams, useMatch, useNavigate } from 'react-router-dom'; +import type { LinkProps } from 'react-router-dom'; +import { useTheme } from '@mui/material/styles'; +import useMediaQuery from '@mui/material/useMediaQuery'; +import Box from '@mui/material/Box'; +import Grid from '@mui/material/Grid'; +import Tabs from '@mui/material/Tabs'; +import Tab from '@mui/material/Tab'; +import AddIcon from '@mui/icons-material/Add'; + +import useFormatMessage from 'hooks/useFormatMessage'; +import { GET_APP } from 'graphql/queries/get-app'; +import * as URLS from 'config/urls'; + +import ConditionalIconButton from 'components/ConditionalIconButton'; +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 = { + flowId: string; +}; + +export default function Flow() { + const { flowId } = useParams() as ApplicationParams; + + return ( + <> + + + + + {flowId} + + + + + + ); +}; diff --git a/packages/web/src/pages/Flows/index.tsx b/packages/web/src/pages/Flows/index.tsx index 63755bf3..b928fab7 100644 --- a/packages/web/src/pages/Flows/index.tsx +++ b/packages/web/src/pages/Flows/index.tsx @@ -1,11 +1,71 @@ +import * as React from 'react'; +import { Link, Routes, Route, useNavigate } from 'react-router-dom'; +import type { LinkProps } from 'react-router-dom'; +import { useQuery } from '@apollo/client'; import Box from '@mui/material/Box'; +import Grid from '@mui/material/Grid'; +import AddIcon from '@mui/icons-material/Add'; + +import FlowRow from 'components/FlowRow'; +import ConditionalIconButton from 'components/ConditionalIconButton'; import Container from 'components/Container'; +import PageTitle from 'components/PageTitle'; +import SearchInput from 'components/SearchInput'; +import useFormatMessage from 'hooks/useFormatMessage' +import { GET_FLOWS } from 'graphql/queries/get-flows'; +import * as URLS from 'config/urls'; +import type { Flow } from 'types/flow'; export default function Flows() { + const formatMessage = useFormatMessage(); + const [flowName, setFlowName] = React.useState(''); + const { data } = useQuery(GET_FLOWS); + + const flows: Flow[] = data?.getFlows?.filter((flow: Flow) => flow.name?.toLowerCase().includes(flowName.toLowerCase())); + + const onSearchChange = React.useCallback((event) => { + setFlowName(event.target.value); + }, []); + + const CreateFlowLink = React.useMemo( + () => + React.forwardRef>(function InlineLink( + linkProps, + ref, + ) { + return ; + }), + [], + ); + return ( - Flows + + + {formatMessage('flows.title')} + + + + + + + + } + > + {formatMessage('flows.create')} + + + + + {flows?.map((flow) => ())} ); diff --git a/packages/web/src/routes.tsx b/packages/web/src/routes.tsx index 0652f454..de60b950 100644 --- a/packages/web/src/routes.tsx +++ b/packages/web/src/routes.tsx @@ -3,6 +3,7 @@ import Layout from 'components/Layout'; import Applications from 'pages/Applications'; import Application from 'pages/Application'; import Flows from 'pages/Flows'; +import Flow from 'pages/Flow'; import Explore from 'pages/Explore'; import EditorRoutes from 'pages/Editor/routes'; import * as URLS from 'config/urls'; @@ -11,6 +12,8 @@ export default ( } /> + } /> + } /> } />