From 758148c67475216b8c82558aca6c5c76530c2dc8 Mon Sep 17 00:00:00 2001
From: "kasia.oczkowska" <katarzyna.oczkowska@theworkingroup.net>
Date: Thu, 30 Jan 2025 09:34:38 +0000
Subject: [PATCH] feat: clear connection on app change in flow step

---
 .../components/ChooseAppAndEventSubstep/index.jsx |  8 +++++++-
 packages/web/src/hooks/useStepConnection.js       | 15 +++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/web/src/components/ChooseAppAndEventSubstep/index.jsx b/packages/web/src/components/ChooseAppAndEventSubstep/index.jsx
index 40936244..54d9ad34 100644
--- a/packages/web/src/components/ChooseAppAndEventSubstep/index.jsx
+++ b/packages/web/src/components/ChooseAppAndEventSubstep/index.jsx
@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { useQueryClient } from '@tanstack/react-query';
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
@@ -43,6 +44,7 @@ function ChooseAppAndEventSubstep(props) {
   } = props;
   const formatMessage = useFormatMessage();
   const editorContext = React.useContext(EditorContext);
+  const queryClient = useQueryClient();
   const isTrigger = step.type === 'trigger';
   const isAction = step.type === 'action';
   const useAppsOptions = {};
@@ -109,7 +111,7 @@ function ChooseAppAndEventSubstep(props) {
   );
 
   const onAppChange = React.useCallback(
-    (event, selectedOption) => {
+    async (event, selectedOption) => {
       if (typeof selectedOption === 'object') {
         const appKey = selectedOption?.value;
 
@@ -120,8 +122,12 @@ function ChooseAppAndEventSubstep(props) {
               key: '',
               appKey,
               parameters: {},
+              connection: { id: null },
             },
           });
+          await queryClient.invalidateQueries({
+            queryKey: ['steps', step.id, 'connection'],
+          });
         }
       }
     },
diff --git a/packages/web/src/hooks/useStepConnection.js b/packages/web/src/hooks/useStepConnection.js
index 8ed66f71..7e136a84 100644
--- a/packages/web/src/hooks/useStepConnection.js
+++ b/packages/web/src/hooks/useStepConnection.js
@@ -6,11 +6,18 @@ export default function useStepConnection(stepId) {
   const query = useQuery({
     queryKey: ['steps', stepId, 'connection'],
     queryFn: async ({ signal }) => {
-      const { data } = await api.get(`/v1/steps/${stepId}/connection`, {
-        signal,
-      });
+      try {
+        const { data } = await api.get(`/v1/steps/${stepId}/connection`, {
+          signal,
+        });
 
-      return data;
+        return data;
+      } catch (error) {
+        if (error.response?.status === 404) {
+          return null;
+        }
+        throw error;
+      }
     },
     enabled: !!stepId,
   });