Merge pull request #2088 from automatisch/aut-1213

feat: use REST API endpoint to delete step

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

@@ -3,7 +3,6 @@ import updateStep from './mutations/update-step.js';
 // Converted mutations
 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 updateCurrentUser from './mutations/update-current-user.js';
 import generateAuthUrl from './mutations/generate-auth-url.js';
@@ -16,7 +15,6 @@ import updateFlowStatus from './mutations/update-flow-status.js';
 const mutationResolvers = {
   createConnection,
   createUser,
-  deleteStep,
   executeFlow,
   generateAuthUrl,
   resetConnection,

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

@@ -1,40 +0,0 @@
-import Step from '../../models/step.js';
-
-const deleteStep = async (_parent, params, context) => {
-  const conditions = context.currentUser.can('update', 'Flow');
-  const isCreator = conditions.isCreator;
-  const allSteps = Step.query();
-  const userSteps = context.currentUser.$relatedQuery('steps');
-  const baseQuery = isCreator ? userSteps : allSteps;
-
-  const step = await baseQuery
-    .withGraphFetched('flow')
-    .findOne({
-      'steps.id': params.input.id,
-    })
-    .throwIfNotFound();
-
-  await step.$relatedQuery('executionSteps').delete();
-  await step.$query().delete();
-
-  const nextSteps = await step.flow
-    .$relatedQuery('steps')
-    .where('position', '>', step.position);
-
-  const nextStepQueries = nextSteps.map(async (nextStep) => {
-    await nextStep.$query().patch({
-      position: nextStep.position - 1,
-    });
-  });
-
-  await Promise.all(nextStepQueries);
-
-  step.flow = await step.flow
-    .$query()
-    .withGraphJoined('steps')
-    .orderBy('steps.position', 'asc');
-
-  return step;
-};
-
-export default deleteStep;

packages/backend/src/graphql/schema.graphql

@@ -4,7 +4,6 @@ type Query {
 type Mutation {
   createConnection(input: CreateConnectionInput): Connection
   createUser(input: CreateUserInput): UserWithAcceptInvitationUrl
-  deleteStep(input: DeleteStepInput): Step
   executeFlow(input: ExecuteFlowInput): executeFlowType
   generateAuthUrl(input: GenerateAuthUrlInput): AuthLink
   resetConnection(input: ResetConnectionInput): Connection
@@ -257,10 +256,6 @@ input UpdateStepInput {
   previousStep: PreviousStepInput
 }
 
-input DeleteStepInput {
-  id: String!
-}
-
 input CreateUserInput {
   fullName: String!
   email: String!

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

@@ -1,11 +1,10 @@
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { useMutation } from '@apollo/client';
 
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 
-import { DELETE_STEP } from 'graphql/mutations/delete-step';
+import useDeleteStep from 'hooks/useDeleteStep';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { useQueryClient } from '@tanstack/react-query';
 
@@ -13,15 +12,17 @@ function FlowStepContextMenu(props) {
   const { stepId, onClose, anchorEl, deletable, flowId } = props;
   const formatMessage = useFormatMessage();
   const queryClient = useQueryClient();
-  const [deleteStep] = useMutation(DELETE_STEP);
+  const { mutateAsync: deleteStep } = useDeleteStep();
 
   const deleteActionHandler = React.useCallback(
     async (event) => {
       event.stopPropagation();
-      await deleteStep({ variables: { input: { id: stepId } } });
+
+      await deleteStep(stepId);
+
       await queryClient.invalidateQueries({ queryKey: ['flows', flowId] });
     },
-    [stepId, queryClient],
+    [deleteStep, stepId, queryClient, flowId],
   );
 
   return (

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

@@ -1,14 +0,0 @@
-import { gql } from '@apollo/client';
-export const DELETE_STEP = gql`
-  mutation DeleteStep($input: DeleteStepInput) {
-    deleteStep(input: $input) {
-      id
-      flow {
-        id
-        steps {
-          id
-        }
-      }
-    }
-  }
-`;

packages/web/src/hooks/useDeleteStep.js

@@ -0,0 +1,14 @@
+import { useMutation } from '@tanstack/react-query';
+import api from 'helpers/api';
+
+export default function useDeleteStep() {
+  const query = useMutation({
+    mutationFn: async (stepId) => {
+      const { data } = await api.delete(`/v1/steps/${stepId}`);
+
+      return data;
+    },
+  });
+
+  return query;
+}