fix: Fix for regression in js query refactor in modules

app/client/cypress/support/Pages/JSEditor.ts

@@ -112,7 +112,7 @@ export class JSEditor {
       Cypress.env("MESSAGES").ADD_QUERY_JS_TOOLTIP(),
     );
     //Checking JS object was created successfully
-    this.assertHelper.AssertNetworkStatus("@jsCollections", 200);
+    this.assertHelper.AssertNetworkStatus("@createNewJSCollection", 201);
     this.agHelper.AssertElementVisibility(this._jsObjTxt);
     // Assert that the name of the JS Object is focused when newly created
     this.agHelper.PressEnter();

app/client/src/sagas/JSPaneSagas.ts

@@ -58,6 +58,7 @@ import {
   createNewJSCollection,
   jsSaveActionComplete,
   jsSaveActionStart,
+  refactorJSCollectionAction,
 } from "actions/jsPaneActions";
 import { getCurrentWorkspaceId } from "@appsmith/selectors/selectedWorkspaceSelectors";
 import { getPluginIdOfPackageName } from "sagas/selectors";
@@ -205,21 +206,22 @@ function* handleEachUpdateJSCollection(update: JSUpdate) {
     const parsedBody = update.parsedBody;
     if (parsedBody && !!jsAction) {
       const jsActionTobeUpdated = JSON.parse(JSON.stringify(jsAction));
-      // jsActionTobeUpdated.body = jsAction.body;
       const data = getDifferenceInJSCollection(parsedBody, jsAction);
+
       if (data.nameChangedActions.length) {
         for (let i = 0; i < data.nameChangedActions.length; i++) {
-          yield call(
-            handleRefactorJSActionNameSaga,
-            {
-              actionId: data.nameChangedActions[i].id,
-              collectionName: jsAction.name,
-              pageId: data.nameChangedActions[i].pageId,
-              moduleId: data.nameChangedActions[i].moduleId,
-              oldName: data.nameChangedActions[i].oldName,
-              newName: data.nameChangedActions[i].newName,
-            },
-            jsActionTobeUpdated,
+          yield put(
+            refactorJSCollectionAction({
+              refactorAction: {
+                actionId: data.nameChangedActions[i].id,
+                collectionName: jsAction.name,
+                pageId: data.nameChangedActions[i].pageId || "",
+                moduleId: data.nameChangedActions[i].moduleId,
+                oldName: data.nameChangedActions[i].oldName,
+                newName: data.nameChangedActions[i].newName,
+              },
+              actionCollection: jsActionTobeUpdated,
+            }),
           );
         }
       } else {
@@ -293,23 +295,11 @@ export function* makeUpdateJSCollection(
 ) {
   const jsUpdates: Record<string, JSUpdate> = action.payload || {};
 
-  yield all(
-    Object.keys(jsUpdates).map((key) =>
-      put(jsSaveActionStart({ id: jsUpdates[key].id })),
-    ),
-  );
-
   yield all(
     Object.keys(jsUpdates).map((key) =>
       call(handleEachUpdateJSCollection, jsUpdates[key]),
     ),
   );
-
-  yield all(
-    Object.keys(jsUpdates).map((key) =>
-      put(jsSaveActionComplete({ id: jsUpdates[key].id })),
-    ),
-  );
 }
 
 function* updateJSCollection(data: {
@@ -326,6 +316,7 @@ function* updateJSCollection(data: {
   try {
     const { deletedActions, jsCollection, newActions } = data;
     if (jsCollection) {
+      yield put(jsSaveActionStart({ id: jsCollection.id }));
       const response: JSCollectionCreateUpdateResponse = yield call(
         updateJSCollectionAPICall,
         jsCollection,
@@ -365,6 +356,8 @@ function* updateJSCollection(data: {
       type: ReduxActionErrorTypes.UPDATE_JS_ACTION_ERROR,
       payload: { error, data: jsAction },
     });
+  } finally {
+    yield put(jsSaveActionComplete({ id: data.jsCollection.id }));
   }
 }
 
@@ -640,9 +633,12 @@ function* handleUpdateJSCollectionBody(
 }
 
 function* handleRefactorJSActionNameSaga(
-  refactorAction: RefactorAction,
-  actionCollection: JSCollection,
+  data: ReduxAction<{
+    refactorAction: RefactorAction;
+    actionCollection: JSCollection;
+  }>,
 ) {
+  const { actionCollection, refactorAction } = data.payload;
   const { pageId } = refactorAction;
   const layoutId: string | undefined = yield select(getCurrentLayoutId);
   if (!pageId || !layoutId) {
@@ -656,6 +652,7 @@ function* handleRefactorJSActionNameSaga(
   };
   // call to refactor action
   try {
+    yield put(jsSaveActionStart({ id: actionCollection.id }));
     const refactorResponse: ApiResponse =
       yield JSActionAPI.updateJSCollectionActionRefactor(requestData);
 
@@ -683,6 +680,8 @@ function* handleRefactorJSActionNameSaga(
       type: ReduxActionErrorTypes.REFACTOR_JS_ACTION_NAME_ERROR,
       payload: { collectionId: actionCollection.id },
     });
+  } finally {
+    yield put(jsSaveActionComplete({ id: actionCollection.id }));
   }
 }
 
@@ -829,6 +828,10 @@ export default function* root() {
       ReduxActionTypes.START_EXECUTE_JS_FUNCTION,
       handleStartExecuteJSFunctionSaga,
     ),
+    takeEvery(
+      ReduxActionTypes.REFACTOR_JS_ACTION_NAME,
+      handleRefactorJSActionNameSaga,
+    ),
     debounce(
       100,
       ReduxActionTypes.UPDATE_JS_ACTION_BODY_INIT,

app/client/src/utils/JSPaneUtils.tsx

@@ -219,7 +219,7 @@ export const createDummyJSCollectionActions = (
       workspaceId,
       executeOnLoad: false,
       actionConfiguration: {
-        body: "function (){\n\t\t//\twrite code here\n\t\t//\tthis.myVar1 = [1,2,3]\n\t}",
+        body: "function () {}",
         timeoutInMillisecond: 0,
         jsArguments: [],
       },
@@ -231,7 +231,7 @@ export const createDummyJSCollectionActions = (
       workspaceId,
       executeOnLoad: false,
       actionConfiguration: {
-        body: "async function () {\n\t\t//\tuse async-await or promises\n\t\t//\tawait storeValue('varName', 'hello world')\n\t}",
+        body: "async function () {}",
         timeoutInMillisecond: 0,
         jsArguments: [],
       },
@@ -243,11 +243,11 @@ export const createDummyJSCollectionActions = (
   const variables = [
     {
       name: "myVar1",
-      value: [],
+      value: "[]",
     },
     {
       name: "myVar2",
-      value: {},
+      value: "{}",
     },
   ];
 
@@ -271,7 +271,7 @@ export const createSingleFunctionJsCollection = (
       workspaceId,
       executeOnLoad: false,
       actionConfiguration: {
-        body: "function (){\n\t\t//\twrite code here\n\t}",
+        body: "function () {}",
         timeoutInMillisecond: 0,
         jsArguments: [],
       },