feat: use REST API endpoint to create flow

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/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;
   }