Merge pull request #2322 from automatisch/AUT-1422

feat: clear connection on app change in flow step

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'],
+          });
         }
       }
     },

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,
   });