Merge pull request #2087 from automatisch/aut-1261

feat: use REST API endpoint to delete flow

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

@@ -8,7 +8,6 @@ import verifyConnection from './mutations/verify-connection.js';
 import updateCurrentUser from './mutations/update-current-user.js';
 import generateAuthUrl from './mutations/generate-auth-url.js';
 import createConnection from './mutations/create-connection.js';
-import deleteFlow from './mutations/delete-flow.js';
 import resetConnection from './mutations/reset-connection.js';
 import updateConnection from './mutations/update-connection.js';
 import createUser from './mutations/create-user.ee.js';
@@ -17,7 +16,6 @@ import updateFlowStatus from './mutations/update-flow-status.js';
 const mutationResolvers = {
   createConnection,
   createUser,
-  deleteFlow,
   deleteStep,
   executeFlow,
   generateAuthUrl,

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

@@ -1,53 +0,0 @@
-import Flow from '../../models/flow.js';
-import ExecutionStep from '../../models/execution-step.js';
-import globalVariable from '../../helpers/global-variable.js';
-import logger from '../../helpers/logger.js';
-
-const deleteFlow = async (_parent, params, context) => {
-  const conditions = context.currentUser.can('delete', 'Flow');
-  const isCreator = conditions.isCreator;
-  const allFlows = Flow.query();
-  const userFlows = context.currentUser.$relatedQuery('flows');
-  const baseQuery = isCreator ? userFlows : allFlows;
-
-  const flow = await baseQuery
-    .findOne({
-      id: params.input.id,
-    })
-    .throwIfNotFound();
-
-  const triggerStep = await flow.getTriggerStep();
-  const trigger = await triggerStep?.getTriggerCommand();
-
-  if (trigger?.type === 'webhook' && trigger.unregisterHook) {
-    const $ = await globalVariable({
-      flow,
-      connection: await triggerStep.$relatedQuery('connection'),
-      app: await triggerStep.getApp(),
-      step: triggerStep,
-    });
-
-    try {
-      await trigger.unregisterHook($);
-    } catch (error) {
-      // suppress error as the remote resource might have been already deleted
-      logger.debug(
-        `Failed to unregister webhook for flow ${flow.id}: ${error.message}`
-      );
-    }
-  }
-
-  const executionIds = (
-    await flow.$relatedQuery('executions').select('executions.id')
-  ).map((execution) => execution.id);
-
-  await ExecutionStep.query().delete().whereIn('execution_id', executionIds);
-
-  await flow.$relatedQuery('executions').delete();
-  await flow.$relatedQuery('steps').delete();
-  await flow.$query().delete();
-
-  return;
-};
-
-export default deleteFlow;

packages/backend/src/graphql/schema.graphql

@@ -4,7 +4,6 @@ type Query {
 type Mutation {
   createConnection(input: CreateConnectionInput): Connection
   createUser(input: CreateUserInput): UserWithAcceptInvitationUrl
-  deleteFlow(input: DeleteFlowInput): Boolean
   deleteStep(input: DeleteStepInput): Step
   executeFlow(input: ExecuteFlowInput): executeFlowType
   generateAuthUrl(input: GenerateAuthUrlInput): AuthLink
@@ -247,10 +246,6 @@ input ExecuteFlowInput {
   stepId: String!
 }
 
-input DeleteFlowInput {
-  id: String!
-}
-
 input UpdateStepInput {
   id: String
   previousStepId: String

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

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import { useMutation } from '@apollo/client';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { useQueryClient } from '@tanstack/react-query';
@@ -10,9 +9,9 @@ import { Link } from 'react-router-dom';
 
 import Can from 'components/Can';
 import * as URLS from 'config/urls';
-import { DELETE_FLOW } from 'graphql/mutations/delete-flow';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useDuplicateFlow from 'hooks/useDuplicateFlow';
+import useDeleteFlow from 'hooks/useDeleteFlow';
 
 function ContextMenu(props) {
   const { flowId, onClose, anchorEl, onDuplicateFlow, onDeleteFlow, appKey } =
@@ -21,7 +20,7 @@ function ContextMenu(props) {
   const formatMessage = useFormatMessage();
   const queryClient = useQueryClient();
   const { mutateAsync: duplicateFlow } = useDuplicateFlow(flowId);
-  const [deleteFlow] = useMutation(DELETE_FLOW);
+  const { mutateAsync: deleteFlow } = useDeleteFlow();
 
   const onFlowDuplicate = React.useCallback(async () => {
     await duplicateFlow();
@@ -52,18 +51,7 @@ function ContextMenu(props) {
   ]);
 
   const onFlowDelete = React.useCallback(async () => {
-    await deleteFlow({
-      variables: { input: { id: flowId } },
-      update: (cache) => {
-        const flowCacheId = cache.identify({
-          __typename: 'Flow',
-          id: flowId,
-        });
-        cache.evict({
-          id: flowCacheId,
-        });
-      },
-    });
+    await deleteFlow(flowId);
 
     if (appKey) {
       await queryClient.invalidateQueries({

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

@@ -1,6 +0,0 @@
-import { gql } from '@apollo/client';
-export const DELETE_FLOW = gql`
-  mutation DeleteFlow($input: DeleteFlowInput) {
-    deleteFlow(input: $input)
-  }
-`;

packages/web/src/hooks/useDeleteFlow.js

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