feat: create flow with trigger app

packages/backend/src/graphql/mutations/create-flow.ts

@@ -1,14 +1,23 @@
 import Step from '../../models/step';
-import flowType from '../types/flow';
+import flowType, { flowInputType} from '../types/flow';
 import RequestWithCurrentUser from '../../types/express/request-with-current-user';
 
-const createFlowResolver = async (req: RequestWithCurrentUser) => {
+type Params = {
+  input: {
+    triggerAppKey: string;
+  };
+};
+
+const createFlowResolver = async (params: Params, req: RequestWithCurrentUser) => {
+  const appKey = params?.input?.triggerAppKey;
+
   const flow = await req.currentUser.$relatedQuery('flows').insert({});
 
   await Step.query().insert({
     flowId: flow.id,
     type: 'trigger',
     position: 1,
+    appKey,
   });
 
   return flow;
@@ -16,8 +25,11 @@ const createFlowResolver = async (req: RequestWithCurrentUser) => {
 
 const createFlow = {
   type: flowType,
-  resolve: (_: any, _params: any, req: RequestWithCurrentUser) =>
+  args: {
-    createFlowResolver(req),
+    input: { type: flowInputType },
+  },
+  resolve: (_: any, params: Params, req: RequestWithCurrentUser) =>
+    createFlowResolver(params, req),
 };
 
 export default createFlow;

packages/backend/src/graphql/types/flow.ts

@@ -1,6 +1,7 @@
 import {
   GraphQLList,
   GraphQLObjectType,
+  GraphQLInputObjectType,
   GraphQLString,
   GraphQLBoolean,
 } from 'graphql';
@@ -18,4 +19,11 @@ const flowType = new GraphQLObjectType({
   },
 });
 
+export const flowInputType = new GraphQLInputObjectType({
+  name: 'FlowInput',
+  fields: {
+    triggerAppKey: { type: GraphQLString },
+  },
+});
+
 export default flowType;

packages/web/src/config/urls.ts

@@ -16,7 +16,8 @@ export const APP_FLOWS = (appKey: string): string => `/app/${appKey}/flows`;
 export const APP_FLOWS_PATTERN = '/app/:appKey/flows';
 
 export const EDITOR = '/editor';
-export const CREATE_FLOW = '/editor/create';
+export const CREATE_FLOW ='/editor/create';
+export const CREATE_FLOW_WITH_APP = (appKey: string) => `/editor/create?appKey=${appKey}`;
 export const FLOW_EDITOR = (flowId: string): string => `/editor/${flowId}`;
 
 export const FLOWS = '/flows';

packages/web/src/graphql/mutations/create-flow.ts

@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client';
 
 export const CREATE_FLOW = gql`
-  mutation createFlow {
+  mutation createFlow($input: FlowInput) {
-    createFlow {
+    createFlow(input: $input) {
       id
       name
     }

packages/web/src/pages/Application/index.tsx

@@ -70,9 +70,9 @@ export default function Application(): React.ReactElement {
         linkProps,
         ref,
       ) {
-        return <Link ref={ref} to={URLS.CREATE_FLOW} {...linkProps} />;
+        return <Link ref={ref} to={URLS.CREATE_FLOW_WITH_APP(appKey)} {...linkProps} />;
       }),
-    [],
+    [appKey],
   );
 
   return (

packages/web/src/pages/Editor/create.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useMutation } from '@apollo/client';
 import CircularProgress from '@mui/material/CircularProgress';
 import Typography from '@mui/material/Typography';
@@ -11,22 +11,29 @@ import { CREATE_FLOW } from 'graphql/mutations/create-flow';
 import Box from '@mui/material/Box';
 
 export default function CreateFlow(): React.ReactElement {
+  const [searchParams] = useSearchParams();
   const navigate = useNavigate();
   const formatMessage = useFormatMessage();
   const [createFlow] = useMutation(CREATE_FLOW);
 
+  const appKey = searchParams.get('appKey');
+
   React.useEffect(() => {
     async function initiate() {
-      const response = await createFlow();
+      const response = await createFlow({
+        variables: {
+          input: {
+            triggerAppKey: appKey,
+          }
+        }
+      });
       const flowId = response.data?.createFlow?.id;
 
-      setTimeout(() => {
+      navigate(URLS.FLOW_EDITOR(flowId));
-        navigate(URLS.FLOW_EDITOR(flowId));
-      }, 1234);
     }
 
     initiate();
-  }, [createFlow, navigate]);
+  }, [createFlow, navigate, appKey]);
 
   return (
     <Box sx={{ display: 'flex', flex: 1, height: '100vh', justifyContent: 'center', alignItems: 'center', gap: 2 }}>