Merge pull request #2084 from automatisch/aut-1228

feat: use REST API endpoint to create flow

packages/backend/src/graphql/mutation-resolvers.js

@@ -5,7 +5,6 @@ import executeFlow from './mutations/execute-flow.js';
 import updateUser from './mutations/update-user.ee.js';
 import deleteStep from './mutations/delete-step.js';
 import verifyConnection from './mutations/verify-connection.js';
-import createFlow from './mutations/create-flow.js';
 import deleteCurrentUser from './mutations/delete-current-user.ee.js';
 import updateCurrentUser from './mutations/update-current-user.js';
 import generateAuthUrl from './mutations/generate-auth-url.js';
@@ -18,7 +17,6 @@ import updateFlowStatus from './mutations/update-flow-status.js';
 
 const mutationResolvers = {
   createConnection,
-  createFlow,
   createUser,
   deleteCurrentUser,
   deleteFlow,

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

@@ -1,45 +0,0 @@
-import App from '../../models/app.js';
-import Step from '../../models/step.js';
-
-const createFlow = async (_parent, params, context) => {
-  context.currentUser.can('create', 'Flow');
-
-  const connectionId = params?.input?.connectionId;
-  const appKey = params?.input?.triggerAppKey;
-
-  if (appKey) {
-    await App.findOneByKey(appKey);
-  }
-
-  const flow = await context.currentUser.$relatedQuery('flows').insert({
-    name: 'Name your flow',
-  });
-
-  if (connectionId) {
-    const hasConnection = await context.currentUser
-      .$relatedQuery('connections')
-      .findById(connectionId);
-
-    if (!hasConnection) {
-      throw new Error('The connection does not exist!');
-    }
-  }
-
-  await Step.query().insert({
-    flowId: flow.id,
-    type: 'trigger',
-    position: 1,
-    appKey,
-    connectionId,
-  });
-
-  await Step.query().insert({
-    flowId: flow.id,
-    type: 'action',
-    position: 2,
-  });
-
-  return flow;
-};
-
-export default createFlow;

packages/backend/src/graphql/schema.graphql

@@ -3,7 +3,6 @@ type Query {
 }
 type Mutation {
   createConnection(input: CreateConnectionInput): Connection
-  createFlow(input: CreateFlowInput): Flow
   createUser(input: CreateUserInput): UserWithAcceptInvitationUrl
   deleteCurrentUser: Boolean
   deleteFlow(input: DeleteFlowInput): Boolean
@@ -240,11 +239,6 @@ input VerifyConnectionInput {
   id: String!
 }
 
-input CreateFlowInput {
-  triggerAppKey: String
-  connectionId: String
-}
-
 input UpdateFlowStatusInput {
   id: String!
   active: Boolean!

packages/web/src/components/AddNewAppConnection/index.jsx

@@ -27,11 +27,12 @@ import useLazyApps from 'hooks/useLazyApps';
 
 function createConnectionOrFlow(appKey, supportsConnections = false) {
   if (!supportsConnections) {
-    return URLS.CREATE_FLOW_WITH_APP(appKey);
+    return URLS.CREATE_FLOW;
   }
 
   return URLS.APP_ADD_CONNECTION(appKey);
 }
+
 function AddNewAppConnection(props) {
   const { onClose } = props;
   const theme = useTheme();

packages/web/src/components/AppFlows/index.jsx

@@ -43,10 +43,7 @@ function AppFlows(props) {
             text={formatMessage('app.noFlows')}
             data-test="flows-no-results"
             {...(allowed && {
-              to: URLS.CREATE_FLOW_WITH_APP_AND_CONNECTION(
+              to: URLS.CREATE_FLOW,
-                appKey,
-                connectionId
-              ),
             })}
           />
         )}

packages/web/src/config/urls.js

@@ -41,19 +41,6 @@ export const APP_FLOWS_FOR_CONNECTION = (appKey, connectionId) =>
 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) =>
-  `/editor/create?appKey=${appKey}`;
-export const CREATE_FLOW_WITH_APP_AND_CONNECTION = (appKey, connectionId) => {
-  const params = {};
-  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) => `/editor/${flowId}`;
 export const FLOWS = '/flows';
 // TODO: revert this back to /flows/:flowId once we have a proper single flow page
@@ -100,5 +87,4 @@ export const DASHBOARD = FLOWS;
 
 // External links and paths
 // The paths are sensitive for their relativity.
-export const WEBHOOK_DOCS_PATH =
+export const WEBHOOK_DOCS_PATH = './apps/webhooks/connection';
-  './apps/webhooks/connection';

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

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

packages/web/src/hooks/useCreateFlow.js

@@ -0,0 +1,23 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useCreateFlow() {
+  const queryClient = useQueryClient();
+
+  const query = useMutation({
+    mutationFn: async () => {
+      const { data } = await api.post('/v1/flows');
+
+      return data;
+    },
+
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['flows'],
+      });
+    },
+  });
+
+  return query;
+}

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

@@ -134,10 +134,7 @@ export default function Application() {
                           color="primary"
                           size="large"
                           component={Link}
-                          to={URLS.CREATE_FLOW_WITH_APP_AND_CONNECTION(
+                          to={URLS.CREATE_FLOW}
-                            appKey,
-                            connectionId,
-                          )}
                           fullWidth
                           icon={<AddIcon />}
                           disabled={!allowed}

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

@@ -1,42 +1,30 @@
 import * as React from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
-import { useMutation } from '@apollo/client';
 import CircularProgress from '@mui/material/CircularProgress';
 import Typography from '@mui/material/Typography';
 import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
-import { CREATE_FLOW } from 'graphql/mutations/create-flow';
+import useCreateFlow from 'hooks/useCreateFlow';
 import Box from '@mui/material/Box';
 
 export default function CreateFlow() {
-  const [searchParams] = useSearchParams();
   const navigate = useNavigate();
   const formatMessage = useFormatMessage();
-  const [createFlow, { error }] = useMutation(CREATE_FLOW);
+  const { mutateAsync: createFlow, isError } = useCreateFlow();
-  const appKey = searchParams.get('appKey');
-  const connectionId = searchParams.get('connectionId');
 
   React.useEffect(() => {
     async function initiate() {
-      const variables = {};
+      const response = await createFlow();
-      if (appKey) {
+
-        variables.triggerAppKey = appKey;
+      const flowId = response.data?.id;
-      }
+
-      if (connectionId) {
-        variables.connectionId = connectionId;
-      }
-      const response = await createFlow({
-        variables: {
-          input: variables,
-        },
-      });
-      const flowId = response.data?.createFlow?.id;
       navigate(URLS.FLOW_EDITOR(flowId), { replace: true });
     }
-    initiate();
-  }, [createFlow, navigate, appKey, connectionId]);
 
-  if (error) {
+    initiate();
+  }, [createFlow, navigate]);
+
+  if (isError) {
     return null;
   }