From 2e5dfdbb0dcac6cb5005f89dbac17533413782ab Mon Sep 17 00:00:00 2001 From: Ali BARIN Date: Wed, 18 Sep 2024 14:51:23 +0000 Subject: [PATCH 1/2] feat: use REST API endpoint to create flow --- .../components/AddNewAppConnection/index.jsx | 3 +- .../web/src/components/AppFlows/index.jsx | 5 +-- packages/web/src/config/urls.js | 16 +-------- packages/web/src/hooks/useCreateFlow.js | 23 +++++++++++++ packages/web/src/pages/Application/index.jsx | 5 +-- packages/web/src/pages/Editor/create.jsx | 34 ++++++------------- 6 files changed, 39 insertions(+), 47 deletions(-) create mode 100644 packages/web/src/hooks/useCreateFlow.js 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; } From 342990e1bf310b51bd0deacde0f8ac25060ebbc3 Mon Sep 17 00:00:00 2001 From: Ali BARIN Date: Wed, 18 Sep 2024 14:53:06 +0000 Subject: [PATCH 2/2] chore: remove redundant create flow mutation --- .../backend/src/graphql/mutation-resolvers.js | 2 - .../src/graphql/mutations/create-flow.js | 45 ------------------- packages/backend/src/graphql/schema.graphql | 6 --- .../web/src/graphql/mutations/create-flow.js | 9 ---- 4 files changed, 62 deletions(-) delete mode 100644 packages/backend/src/graphql/mutations/create-flow.js delete mode 100644 packages/web/src/graphql/mutations/create-flow.js diff --git a/packages/backend/src/graphql/mutation-resolvers.js b/packages/backend/src/graphql/mutation-resolvers.js index ac6f70f7..fc1bf26f 100644 --- a/packages/backend/src/graphql/mutation-resolvers.js +++ b/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, diff --git a/packages/backend/src/graphql/mutations/create-flow.js b/packages/backend/src/graphql/mutations/create-flow.js deleted file mode 100644 index c16166d9..00000000 --- a/packages/backend/src/graphql/mutations/create-flow.js +++ /dev/null @@ -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; diff --git a/packages/backend/src/graphql/schema.graphql b/packages/backend/src/graphql/schema.graphql index c960eb42..83a497c8 100644 --- a/packages/backend/src/graphql/schema.graphql +++ b/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! diff --git a/packages/web/src/graphql/mutations/create-flow.js b/packages/web/src/graphql/mutations/create-flow.js deleted file mode 100644 index 912b8f13..00000000 --- a/packages/web/src/graphql/mutations/create-flow.js +++ /dev/null @@ -1,9 +0,0 @@ -import { gql } from '@apollo/client'; -export const CREATE_FLOW = gql` - mutation CreateFlow($input: CreateFlowInput) { - createFlow(input: $input) { - id - name - } - } -`;