feat: disable submitting when submitting is in progress

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

@@ -51,26 +51,29 @@ function ChooseConnectionSubstep(props) {
   } = props;
   const { appKey } = step;
   const formatMessage = useFormatMessage();
+  const enqueueSnackbar = useEnqueueSnackbar();
+
   const editorContext = React.useContext(EditorContext);
   const [showAddConnectionDialog, setShowAddConnectionDialog] =
     React.useState(false);
   const [showAddSharedConnectionDialog, setShowAddSharedConnectionDialog] =
     React.useState(false);
+  const [submitting, setSubmitting] = React.useState(false);
+
   const queryClient = useQueryClient();
-  const { data: appOAuthClients } = useOAuthClients(application.key);
-  const enqueueSnackbar = useEnqueueSnackbar();
 
   const { authenticate } = useAuthenticateApp({
     appKey: application.key,
     useShared: true,
   });
 
-  const {
-    data,
-    isLoading: isAppConnectionsLoading,
-    refetch,
-  } = useAppConnections(appKey);
+  const { data: appOAuthClients } = useOAuthClients(application.key);
 
+  const {
+    data: appConnectionsData,
+    isLoading: isAppConnectionsLoading,
+    refetch: refetchAppConnections,
+  } = useAppConnections(appKey);
   const { data: appConfig } = useAppConfig(application.key);
 
   const { data: stepConnectionData } = useStepConnection(step.id);
@@ -94,7 +97,7 @@ function ChooseConnectionSubstep(props) {
   }, []);
 
   const connectionOptions = React.useMemo(() => {
-    const appWithConnections = data?.data;
+    const appWithConnections = appConnectionsData?.data;
     const options =
       appWithConnections?.map((connection) => optionGenerator(connection)) ||
       [];
@@ -140,7 +143,7 @@ function ChooseConnectionSubstep(props) {
     }
 
     return options.concat([addCustomConnection, addConnectionWithOAuthClient]);
-  }, [data, formatMessage, appConfig, appOAuthClients]);
+  }, [appConnectionsData, formatMessage, appConfig, appOAuthClients]);
 
   const handleClientClick = async (oauthClientId) => {
     try {
@@ -150,7 +153,7 @@ function ChooseConnectionSubstep(props) {
       const connectionId = response?.createConnection.id;
 
       if (connectionId) {
-        await refetch();
+        await refetchAppConnections();
         onChange({
           step: {
             ...step,
@@ -173,11 +176,12 @@ function ChooseConnectionSubstep(props) {
 
   const handleAddConnectionClose = React.useCallback(
     async (response) => {
+      setSubmitting(true);
       setShowAddConnectionDialog(false);
       const connectionId = response?.createConnection?.id;
       if (connectionId) {
-        await refetch();
-        onChange({
+        await refetchAppConnections();
+        await onChange({
           step: {
             ...step,
             connection: {
@@ -186,27 +190,23 @@ function ChooseConnectionSubstep(props) {
           },
         });
       }
+      setSubmitting(false);
     },
-    [onChange, refetch, step],
+    [onChange, refetchAppConnections, step],
   );
 
   const handleChange = React.useCallback(
     async (event, selectedOption) => {
       if (typeof selectedOption === 'object') {
+        setSubmitting(true);
         const connectionId = selectedOption?.value;
 
         if (connectionId === ADD_CONNECTION_VALUE) {
           setShowAddConnectionDialog(true);
-          return;
-        }
-
-        if (connectionId === ADD_SHARED_CONNECTION_VALUE) {
+        } else if (connectionId === ADD_SHARED_CONNECTION_VALUE) {
           setShowAddSharedConnectionDialog(true);
-          return;
-        }
-
-        if (connectionId !== stepConnection?.id) {
-          onChange({
+        } else if (connectionId !== stepConnection?.id) {
+          await onChange({
             step: {
               ...step,
               connection: {
@@ -219,6 +219,7 @@ function ChooseConnectionSubstep(props) {
             queryKey: ['steps', step.id, 'connection'],
           });
         }
+        setSubmitting(false);
       }
     },
     [stepConnection?.id, onChange, step, queryClient],
@@ -259,7 +260,9 @@ function ChooseConnectionSubstep(props) {
             fullWidth
             disablePortal
             disableClearable
-            disabled={editorContext.readOnly}
+            disabled={
+              editorContext.readOnly || isTestConnectionPending || submitting
+            }
             options={connectionOptions}
             renderInput={(params) => (
               <TextField
@@ -283,6 +286,7 @@ function ChooseConnectionSubstep(props) {
             onClick={onSubmit}
             sx={{ mt: 2 }}
             disabled={
+              submitting ||
               isTestConnectionPending ||
               !stepConnection?.verified ||
               editorContext.readOnly

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

@@ -176,9 +176,12 @@ function FlowStep(props) {
       ? triggerSubstepsData
       : actionSubstepsData || [];
 
-  const handleChange = React.useCallback(({ step }) => {
-    onChange(step);
-  }, []);
+  const handleChange = React.useCallback(
+    async ({ step }) => {
+      await onChange(step);
+    },
+    [onChange],
+  );
 
   const expandNextStep = React.useCallback(() => {
     setCurrentSubstep((currentSubstep) => (currentSubstep ?? 0) + 1);