From 91bfb38651a23e868b0bb7dd2f76ab78a9513f01 Mon Sep 17 00:00:00 2001 From: "kasia.oczkowska" Date: Fri, 28 Mar 2025 09:15:33 +0000 Subject: [PATCH 1/2] fix: correct the dependencies array in the handleChange function within the ChooseConnectionSubstep --- packages/web/src/components/ChooseConnectionSubstep/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/src/components/ChooseConnectionSubstep/index.jsx b/packages/web/src/components/ChooseConnectionSubstep/index.jsx index 50367978..a7f5bcf3 100644 --- a/packages/web/src/components/ChooseConnectionSubstep/index.jsx +++ b/packages/web/src/components/ChooseConnectionSubstep/index.jsx @@ -221,7 +221,7 @@ function ChooseConnectionSubstep(props) { } } }, - [step, onChange, queryClient], + [stepConnection?.id, onChange, step, queryClient], ); React.useEffect(() => { From b69900ed119ecfed49087b812a069be7cfb983ca Mon Sep 17 00:00:00 2001 From: "kasia.oczkowska" Date: Mon, 31 Mar 2025 10:45:12 +0100 Subject: [PATCH 2/2] feat: disable submitting when submitting is in progress --- .../ChooseConnectionSubstep/index.jsx | 50 ++++++++++--------- .../web/src/components/FlowStep/index.jsx | 9 ++-- 2 files changed, 33 insertions(+), 26 deletions(-) diff --git a/packages/web/src/components/ChooseConnectionSubstep/index.jsx b/packages/web/src/components/ChooseConnectionSubstep/index.jsx index a7f5bcf3..c11a4111 100644 --- a/packages/web/src/components/ChooseConnectionSubstep/index.jsx +++ b/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) => ( { - onChange(step); - }, []); + const handleChange = React.useCallback( + async ({ step }) => { + await onChange(step); + }, + [onChange], + ); const expandNextStep = React.useCallback(() => { setCurrentSubstep((currentSubstep) => (currentSubstep ?? 0) + 1);