Fix: Update js collections calls are being sent before onPageLoad calls (#21747)

## Description
Fix: Update js collections calls are being sent before onPageLoad calls

Fixes #20769

## Type of change
- Bug fix (non-breaking change which fixes an issue)


## How Has This Been Tested?
- Manual

### Test Plan
- [x] existing apps
- [x] git imported apps
- [x] git connected apps

### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)


## Checklist:
### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [x] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [x] Added Test Plan Approved label after reveiwing all Cypress test

app/client/src/actions/pluginActionActions.ts

@@ -5,6 +5,7 @@ import type {
   ReduxAction,
   ReduxActionWithoutPayload,
 } from "@appsmith/constants/ReduxActionConstants";
+import type { JSUpdate } from "utils/JSPaneUtils";
 import {
   ReduxActionErrorTypes,
   ReduxActionTypes,
@@ -283,6 +284,13 @@ export const executePageLoadActions = (): ReduxActionWithoutPayload => ({
   type: ReduxActionTypes.EXECUTE_PAGE_LOAD_ACTIONS,
 });
 
+export const executeJSUpdates = (
+  payload: Record<string, JSUpdate>,
+): ReduxAction<unknown> => ({
+  type: ReduxActionTypes.EXECUTE_JS_UPDATES,
+  payload,
+});
+
 export const setActionsToExecuteOnPageLoad = (
   actions: Array<{
     executeOnLoad: boolean;

app/client/src/ce/constants/ReduxActionConstants.tsx

@@ -28,6 +28,7 @@ export const ReduxActionTypes = {
   TOGGLE_INSTALLER: "TOGGLE_INSTALLER",
   FETCH_JS_LIBRARIES_INIT: "FETCH_JS_LIBRARIES_INIT",
   FETCH_JS_LIBRARIES_SUCCESS: "FETCH_JS_LIBRARIES_SUCCESS",
+  EXECUTE_JS_UPDATES: "EXECUTE_JS_UPDATES",
   CLEAR_PROCESSED_INSTALLS: "CLEAR_PROCESSED_INSTALLS",
   INSTALL_LIBRARY_INIT: "INSTALL_LIBRARY_INIT",
   INSTALL_LIBRARY_START: "INSTALL_LIBRARY_START",

app/client/src/sagas/ActionExecution/PluginActionSaga.ts

@@ -6,6 +6,8 @@ import {
   runAction,
   updateAction,
 } from "actions/pluginActionActions";
+import { makeUpdateJSCollection } from "sagas/JSPaneSagas";
+
 import { setDebuggerSelectedTab, showDebugger } from "actions/debuggerActions";
 import type {
   ApplicationPayload,
@@ -1105,5 +1107,6 @@ export function* watchPluginActionExecutionSagas() {
       ReduxActionTypes.EXECUTE_PAGE_LOAD_ACTIONS,
       executePageLoadActionsSaga,
     ),
+    takeLatest(ReduxActionTypes.EXECUTE_JS_UPDATES, makeUpdateJSCollection),
   ]);
 }

app/client/src/sagas/EvaluationsSaga.ts

@@ -13,9 +13,9 @@ import {
 
 import type {
   EvaluationReduxAction,
-  AnyReduxAction,
   ReduxAction,
   ReduxActionType,
+  AnyReduxAction,
 } from "@appsmith/constants/ReduxActionConstants";
 import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
 import {
@@ -75,7 +75,7 @@ import { validate } from "workers/Evaluation/validations";
 import { diff } from "deep-diff";
 import { REPLAY_DELAY } from "entities/Replay/replayUtils";
 import type { EvaluationVersion } from "@appsmith/api/ApplicationApi";
-import { makeUpdateJSCollection } from "sagas/JSPaneSagas";
+
 import type { LogObject } from "entities/AppsmithConsole";
 import { ENTITY_TYPE } from "entities/AppsmithConsole";
 import type { Replayable } from "entities/Replay/ReplayEntity/ReplayEditor";
@@ -105,6 +105,7 @@ import type {
 import type { ActionDescription } from "@appsmith/workers/Evaluation/fns";
 import { handleEvalWorkerRequestSaga } from "./EvalWorkerActionSagas";
 import { getAppsmithConfigs } from "ce/configs";
+import { executeJSUpdates } from "actions/pluginActionActions";
 
 const APPSMITH_CONFIGS = getAppsmithConfigs();
 
@@ -129,6 +130,8 @@ export function* updateDataTreeHandler(
   postEvalActions?: Array<AnyReduxAction>,
 ) {
   const { evalTreeResponse, requiresLogging, unevalTree } = data;
+  const postEvalActionsToDispatch: Array<AnyReduxAction> =
+    postEvalActions || [];
 
   const {
     dataTree,
@@ -191,7 +194,7 @@ export function* updateDataTreeHandler(
 
   if (appMode !== APP_MODE.PUBLISHED) {
     const jsData: Record<string, unknown> = yield select(getAllJSActionsData);
-    yield call(makeUpdateJSCollection, jsUpdates);
+    postEvalActionsToDispatch.push(executeJSUpdates(jsUpdates));
 
     if (requiresLogging) {
       yield fork(
@@ -215,8 +218,8 @@ export function* updateDataTreeHandler(
     );
   }
   yield put(setDependencyMap(dependencies));
-  if (postEvalActions && postEvalActions.length) {
-    yield call(postEvalActionDispatcher, postEvalActions);
+  if (postEvalActionsToDispatch && postEvalActionsToDispatch.length) {
+    yield call(postEvalActionDispatcher, postEvalActionsToDispatch);
   }
 }
 

app/client/src/sagas/JSPaneSagas.ts

@@ -223,6 +223,7 @@ function* handleEachUpdateJSCollection(update: JSUpdate) {
           updateCollection = true;
           jsActionTobeUpdated.actions = nonDeletedActions;
         }
+
         if (updateCollection) {
           newActions.forEach((action) => {
             AnalyticsUtil.logEvent("JS_OBJECT_FUNCTION_ADDED", {
@@ -242,7 +243,11 @@ function* handleEachUpdateJSCollection(update: JSUpdate) {
   }
 }
 
-export function* makeUpdateJSCollection(jsUpdates: Record<string, JSUpdate>) {
+export function* makeUpdateJSCollection(
+  action: ReduxAction<Record<string, JSUpdate>>,
+) {
+  const jsUpdates: Record<string, JSUpdate> = action.payload;
+
   yield all(
     Object.keys(jsUpdates).map((key) =>
       call(handleEachUpdateJSCollection, jsUpdates[key]),