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 (