diff --git a/packages/backend/src/graphql/mutations/create-flow.ts b/packages/backend/src/graphql/mutations/create-flow.ts index 0732ffe0..3adb0edc 100644 --- a/packages/backend/src/graphql/mutations/create-flow.ts +++ b/packages/backend/src/graphql/mutations/create-flow.ts @@ -4,6 +4,7 @@ import Context from '../../types/express/context'; type Params = { input: { triggerAppKey: string; + connectionId: string; }; }; @@ -12,23 +13,32 @@ const createFlow = async ( params: Params, context: Context ) => { + const connectionId = params?.input?.connectionId; const appKey = params?.input?.triggerAppKey; const flow = await context.currentUser.$relatedQuery('flows').insert({ name: 'Name your flow', }); + if (connectionId) { + await context.currentUser + .$relatedQuery('connections') + .findById(connectionId) + .throwIfNotFound(); + } + await Step.query().insert({ flowId: flow.id, type: 'trigger', position: 1, appKey, + connectionId }); await Step.query().insert({ flowId: flow.id, type: 'action', - position: 2, + position: 2 }); return flow; diff --git a/packages/backend/src/graphql/schema.graphql b/packages/backend/src/graphql/schema.graphql index eb17dd77..40ba0ceb 100644 --- a/packages/backend/src/graphql/schema.graphql +++ b/packages/backend/src/graphql/schema.graphql @@ -251,6 +251,7 @@ input DeleteConnectionInput { input CreateFlowInput { triggerAppKey: String + connectionId: String } input UpdateFlowInput { diff --git a/packages/web/src/components/AppFlows/index.tsx b/packages/web/src/components/AppFlows/index.tsx index 4aceae12..1367aa42 100644 --- a/packages/web/src/components/AppFlows/index.tsx +++ b/packages/web/src/components/AppFlows/index.tsx @@ -4,7 +4,10 @@ import { GET_FLOWS } from 'graphql/queries/get-flows'; import Pagination from '@mui/material/Pagination'; import PaginationItem from '@mui/material/PaginationItem'; +import * as URLS from 'config/urls'; import AppFlowRow from 'components/FlowRow'; +import NoResultFound from 'components/NoResultFound'; +import useFormatMessage from 'hooks/useFormatMessage'; import type { IFlow } from '@automatisch/types'; type AppFlowsProps = { @@ -20,8 +23,9 @@ const getLimitAndOffset = (page: number) => ({ export default function AppFlows(props: AppFlowsProps): React.ReactElement { const { appKey } = props; + const formatMessage = useFormatMessage(); const [searchParams, setSearchParams] = useSearchParams(); - const connectionId = searchParams.get('connectionId') || null; + const connectionId = searchParams.get('connectionId') || undefined; const page = parseInt(searchParams.get('page') || '', 10) || 1; const { data } = useQuery(GET_FLOWS, { variables: { appKey, @@ -31,11 +35,21 @@ export default function AppFlows(props: AppFlowsProps): React.ReactElement { const getFlows = data?.getFlows || {}; const { pageInfo, edges } = getFlows; - const appFlows: IFlow[] = edges?.map(({ node }: { node: IFlow }) => node); + const flows: IFlow[] = edges?.map(({ node }: { node: IFlow }) => node); + const hasFlows = flows?.length; + + if (!hasFlows) { + return ( + + ); + } return ( <> - {appFlows?.map((appFlow: IFlow) => ( + {flows?.map((appFlow: IFlow) => ( ))} diff --git a/packages/web/src/config/urls.ts b/packages/web/src/config/urls.ts index 36273839..a9d04e4c 100644 --- a/packages/web/src/config/urls.ts +++ b/packages/web/src/config/urls.ts @@ -22,6 +22,21 @@ export const APP_FLOWS_PATTERN = '/app/:appKey/flows'; export const EDITOR = '/editor'; export const CREATE_FLOW ='/editor/create'; export const CREATE_FLOW_WITH_APP = (appKey: string) => `/editor/create?appKey=${appKey}`; +export const CREATE_FLOW_WITH_APP_AND_CONNECTION = (appKey?: string, connectionId?: string) => { + const params: { appKey?: string, connectionId?: string } = {}; + + if (appKey) { + params.appKey = appKey; + } + + if (connectionId) { + params.connectionId = connectionId; + } + + const searchParams = (new URLSearchParams(params)).toString(); + + return `/editor/create?${searchParams}`; +} export const FLOW_EDITOR = (flowId: string): string => `/editor/${flowId}`; export const FLOWS = '/flows'; diff --git a/packages/web/src/pages/Application/index.tsx b/packages/web/src/pages/Application/index.tsx index 5f40be1d..5b75c671 100644 --- a/packages/web/src/pages/Application/index.tsx +++ b/packages/web/src/pages/Application/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { useQuery } from '@apollo/client'; -import { Link, Route, Navigate, Routes, useParams, useMatch, useNavigate } from 'react-router-dom'; +import { Link, Route, Navigate, Routes, useParams, useSearchParams, 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'; @@ -46,10 +46,12 @@ export default function Application(): React.ReactElement | null { const formatMessage = useFormatMessage(); const connectionsPathMatch = useMatch({ path: URLS.APP_CONNECTIONS_PATTERN, end: false }); const flowsPathMatch = useMatch({ path: URLS.APP_FLOWS_PATTERN, end: false }); + const [searchParams] = useSearchParams(); const { appKey } = useParams() as ApplicationParams; const navigate = useNavigate(); const { data, loading } = useQuery(GET_APP, { variables: { key: appKey } }); + const connectionId = searchParams.get('connectionId') || undefined; const goToApplicationPage = () => navigate('connections'); const app = data?.getApp || {}; @@ -70,9 +72,9 @@ export default function Application(): React.ReactElement | null { linkProps, ref, ) { - return ; + return ; }), - [appKey], + [appKey, connectionId], ); if (loading) return null; diff --git a/packages/web/src/pages/Editor/create.tsx b/packages/web/src/pages/Editor/create.tsx index b723122c..2275d6f5 100644 --- a/packages/web/src/pages/Editor/create.tsx +++ b/packages/web/src/pages/Editor/create.tsx @@ -17,14 +17,23 @@ export default function CreateFlow(): React.ReactElement { const [createFlow] = useMutation(CREATE_FLOW); const appKey = searchParams.get('appKey'); + const connectionId = searchParams.get('connectionId'); React.useEffect(() => { async function initiate() { + const variables: { [key: string]: string } = {}; + + if (appKey) { + variables.triggerAppKey = appKey; + } + + if (connectionId) { + variables.connectionId = connectionId; + } + const response = await createFlow({ variables: { - input: { - triggerAppKey: appKey, - } + input: variables } }); const flowId = response.data?.createFlow?.id; @@ -33,7 +42,7 @@ export default function CreateFlow(): React.ReactElement { } initiate(); - }, [createFlow, navigate, appKey]); + }, [createFlow, navigate, appKey, connectionId]); return (