Skip to content

Commit bb8f053

Browse files
Merge pull request activepieces#6138 from activepieces/fix/websocket-listener-for-runs
fix: infinite loading for testing steps or flows
2 parents 3582d67 + ea0d108 commit bb8f053

File tree

3 files changed

+24
-13
lines changed

3 files changed

+24
-13
lines changed

packages/react-ui/src/app/builder/index.tsx

+10-8
Original file line numberDiff line numberDiff line change
@@ -133,21 +133,15 @@ const BuilderPage = () => {
133133
memorizedSelectedStep?.type === ActionType.PIECE ||
134134
memorizedSelectedStep?.type === TriggerType.PIECE,
135135
});
136+
136137
const pieceModel = versions
137138
? versions[memorizedSelectedStep?.settings.pieceVersion || '']
138139
: undefined;
139140
const socket = useSocket();
140-
141141
useEffect(() => {
142142
socket.on(WebsocketClientEvent.REFRESH_PIECE, () => {
143143
refetchPiece();
144144
});
145-
if (run && !isFlowStateTerminal(run.status)) {
146-
const currentRunId = run.id;
147-
flowRunsApi.addRunListener(socket, currentRunId, (run) => {
148-
setRun(run, flowVersion);
149-
});
150-
}
151145
return () => {
152146
socket.removeAllListeners(WebsocketClientEvent.REFRESH_PIECE);
153147
socket.removeAllListeners(WebsocketClientEvent.FLOW_RUN_PROGRESS);
@@ -158,7 +152,15 @@ const BuilderPage = () => {
158152
WebsocketClientEvent.GENERATE_HTTP_REQUEST_FINISHED,
159153
);
160154
};
161-
}, [socket, refetchPiece, run]);
155+
}, []);
156+
157+
useEffect(() => {
158+
if (run && !isFlowStateTerminal(run.status)) {
159+
flowRunsApi.addRunListener(socket, run.id, (run) => {
160+
setRun(run, flowVersion);
161+
});
162+
}
163+
}, [socket.id, run?.id]);
162164

163165
const { switchToDraft, isSwitchingToDraftPending } = useSwitchToDraft();
164166
const [hasCanvasBeenInitialised, setHasCanvasBeenInitialised] =

packages/react-ui/src/components/custom/searchable-select.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -207,13 +207,13 @@ export const SearchableSelect = <T extends React.Key>({
207207
}}
208208
className="flex gap-2 flex-col items-start"
209209
>
210-
<div className="flex gap-2 items-center">
210+
<div className="flex gap-2 items-center justify-between w-full">
211+
{option.label}
211212
<Check
212213
className={cn('flex-shrink-0 w-4 h-4', {
213214
hidden: selectedIndex !== filterIndex,
214215
})}
215216
/>
216-
{option.label}
217217
</div>
218218
{option.description && (
219219
<div className="text-sm text-muted-foreground">

packages/react-ui/src/features/flow-runs/lib/flow-runs-api.ts

+12-3
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ export const flowRunsApi = {
3535
onUpdate: (response: FlowRun) => void,
3636
): Promise<void> {
3737
socket.emit(WebsocketServerEvent.TEST_FLOW_RUN, request);
38-
const initalRun = await getInitialRun(socket, request.flowVersionId);
39-
onUpdate(initalRun);
38+
const initialRun = await getInitialRun(socket, request.flowVersionId);
39+
onUpdate(initialRun);
4040
},
4141
addRunListener(
4242
socket: Socket,
@@ -51,14 +51,17 @@ export const flowRunsApi = {
5151
if (isFlowStateTerminal(response.status)) {
5252
socket.off(WebsocketClientEvent.FLOW_RUN_PROGRESS, handleProgress);
5353
socket.off('error', handleError);
54+
console.log('clear FLOW_RUN_PROGRESS listener' + response.id);
5455
}
5556
};
5657
const handleError = (error: any) => {
5758
socket.off(WebsocketClientEvent.FLOW_RUN_PROGRESS, handleProgress);
5859
socket.off('error', handleError);
60+
console.log('clear FLOW_RUN_PROGRESS listener', error);
5961
};
6062

6163
socket.on(WebsocketClientEvent.FLOW_RUN_PROGRESS, handleProgress);
64+
console.log('listened to FLOW_RUN_PROGRESS');
6265
socket.on('error', handleError);
6366
},
6467
testStep(
@@ -79,17 +82,20 @@ export const flowRunsApi = {
7982
handleStepFinished,
8083
);
8184
socket.off('error', handleError);
85+
console.log('clear TEST_STEP_FINISHED listener' + response.id);
86+
8287
resolve(response);
8388
}
8489
};
8590

8691
const handleError = (error: any) => {
8792
socket.off(WebsocketClientEvent.TEST_STEP_FINISHED, handleStepFinished);
8893
socket.off('error', handleError);
94+
console.log('clear TEST_STEP_FINISHED listener', error);
8995
reject(error);
9096
};
91-
9297
socket.on(WebsocketClientEvent.TEST_STEP_FINISHED, handleStepFinished);
98+
console.log('listened to TEST_STEP_FINISHED');
9399
socket.on('error', handleError);
94100
});
95101
},
@@ -103,10 +109,13 @@ function getInitialRun(
103109
if (run.flowVersionId !== flowVersionId) {
104110
return;
105111
}
112+
106113
socket.off(WebsocketClientEvent.TEST_FLOW_RUN_STARTED, onRunStarted);
114+
console.log('clear TEST_FLOW_RUN_STARTED listener' + run.id);
107115
resolve(run);
108116
};
109117

110118
socket.on(WebsocketClientEvent.TEST_FLOW_RUN_STARTED, onRunStarted);
119+
console.log('listened to TEST_FLOW_RUN_STARTED');
111120
});
112121
}

0 commit comments

Comments
 (0)