diff --git a/packages/web/src/components/AddNewAppConnection/index.jsx b/packages/web/src/components/AddNewAppConnection/index.jsx index 4ed2146f..010e97cd 100644 --- a/packages/web/src/components/AddNewAppConnection/index.jsx +++ b/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(); diff --git a/packages/web/src/components/AppFlows/index.jsx b/packages/web/src/components/AppFlows/index.jsx index f715c7c7..1926d3f4 100644 --- a/packages/web/src/components/AppFlows/index.jsx +++ b/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( - appKey, - connectionId - ), + to: URLS.CREATE_FLOW, })} /> )} diff --git a/packages/web/src/config/urls.js b/packages/web/src/config/urls.js index 50c1a07c..db0c50d2 100644 --- a/packages/web/src/config/urls.js +++ b/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 = - './apps/webhooks/connection'; +export const WEBHOOK_DOCS_PATH = './apps/webhooks/connection'; diff --git a/packages/web/src/hooks/useCreateFlow.js b/packages/web/src/hooks/useCreateFlow.js new file mode 100644 index 00000000..fd3993bb --- /dev/null +++ b/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; +} diff --git a/packages/web/src/pages/Application/index.jsx b/packages/web/src/pages/Application/index.jsx index 9c6818f9..e143c01b 100644 --- a/packages/web/src/pages/Application/index.jsx +++ b/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( - appKey, - connectionId, - )} + to={URLS.CREATE_FLOW} fullWidth icon={} disabled={!allowed} diff --git a/packages/web/src/pages/Editor/create.jsx b/packages/web/src/pages/Editor/create.jsx index ea33943d..9e9a10f4 100644 --- a/packages/web/src/pages/Editor/create.jsx +++ b/packages/web/src/pages/Editor/create.jsx @@ -1,42 +1,30 @@ import * as React from 'react'; -import { useNavigate, useSearchParams } from 'react-router-dom'; -import { useMutation } from '@apollo/client'; +import { useNavigate } from 'react-router-dom'; 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 appKey = searchParams.get('appKey'); - const connectionId = searchParams.get('connectionId'); + const { mutateAsync: createFlow, isError } = useCreateFlow(); React.useEffect(() => { async function initiate() { - const variables = {}; - if (appKey) { - variables.triggerAppKey = appKey; - } - if (connectionId) { - variables.connectionId = connectionId; - } - const response = await createFlow({ - variables: { - input: variables, - }, - }); - const flowId = response.data?.createFlow?.id; + const response = await createFlow(); + + const flowId = response.data?.id; + navigate(URLS.FLOW_EDITOR(flowId), { replace: true }); } - initiate(); - }, [createFlow, navigate, appKey, connectionId]); - if (error) { + initiate(); + }, [createFlow, navigate]); + + if (isError) { return null; }