From 022d45714fc94bfe276bfed255c7384487e3c11c Mon Sep 17 00:00:00 2001
From: Ayush Pahwa <ayush@appsmith.com>
Date: Mon, 6 May 2024 18:02:52 +0530
Subject: [PATCH] fix: disable main js rename from entity pane (#33202)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description
Updated the condition to prevent main JS function rename from entity
list

Fixes #32275

## Automation

/ok-to-test tags="@tag.Sanity, @tag.IDE"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/8967754921>
> Commit: 9c3f85291a40460a4e7566ae7591308634c4048c
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8967754921&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->




## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No

---------

Co-authored-by: Hetu Nandu <hetu@appsmith.com>
---
 .../pages/Editor/Explorer/Entity/index.tsx    | 10 ++--
 .../Explorer/JSActions/JSActionEntity.tsx     |  4 +-
 .../IDE/EditorPane/JS/JSRender.test.tsx       | 51 +++++++++++++++++++
 3 files changed, 61 insertions(+), 4 deletions(-)

diff --git a/app/client/src/pages/Editor/Explorer/Entity/index.tsx b/app/client/src/pages/Editor/Explorer/Entity/index.tsx
index 1ec18753f3..9870d7545a 100644
--- a/app/client/src/pages/Editor/Explorer/Entity/index.tsx
+++ b/app/client/src/pages/Editor/Explorer/Entity/index.tsx
@@ -29,6 +29,7 @@ import {
   createMessage,
   EXPLORER_BETA_ENTITY,
 } from "@appsmith/constants/messages";
+import classNames from "classnames";
 
 export enum EntityClassNames {
   CONTEXT_MENU = "entity-context-menu",
@@ -361,9 +362,12 @@ export const Entity = forwardRef(
         <EntityItem
           active={!!props.active}
           alwaysShowRightIcon={props.alwaysShowRightIcon}
-          className={`${props.highlight ? "highlighted" : ""} ${
-            props.active ? "active" : ""
-          } t--entity-item`}
+          className={classNames({
+            highlighted: props.highlight,
+            active: props.active,
+            editable: canEditEntityName,
+            "t--entity-item": true,
+          })}
           data-guided-tour-id={`explorer-entity-${props.name}`}
           data-guided-tour-iid={props.name}
           data-testid={`t--entity-item-${props.name}`}
diff --git a/app/client/src/pages/Editor/Explorer/JSActions/JSActionEntity.tsx b/app/client/src/pages/Editor/Explorer/JSActions/JSActionEntity.tsx
index b558c7611b..f7d0c7e0bb 100644
--- a/app/client/src/pages/Editor/Explorer/JSActions/JSActionEntity.tsx
+++ b/app/client/src/pages/Editor/Explorer/JSActions/JSActionEntity.tsx
@@ -92,7 +92,9 @@ export const ExplorerJSCollectionEntity = memo(
       <Entity
         action={navigateToJSCollection}
         active={props.isActive}
-        canEditEntityName={canManageJSAction}
+        canEditEntityName={
+          canManageJSAction && !Boolean(jsAction?.isMainJSCollection)
+        }
         className="t--jsaction"
         contextMenu={contextMenu}
         entityId={jsAction.id}
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/JSRender.test.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/JSRender.test.tsx
index cb1418467f..8485c729ac 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/JS/JSRender.test.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/JSRender.test.tsx
@@ -306,5 +306,56 @@ describe("IDE Render: JS", () => {
       // Close button is rendered
       getByRole("button", { name: "Close pane" });
     });
+
+    it("Prevents edit of main JS object", () => {
+      const page = PageFactory.build();
+      const Main_JS = JSObjectFactory.build({
+        id: "js_id",
+        name: "Main",
+        pageId: page.pageId,
+      });
+      Main_JS.isMainJSCollection = true;
+
+      const Normal_JS = JSObjectFactory.build({
+        id: "js_id2",
+        name: "Normal",
+        pageId: page.pageId,
+      });
+
+      const state = getIDETestState({
+        pages: [page],
+        js: [Main_JS, Normal_JS],
+        tabs: {
+          [EditorEntityTab.QUERIES]: [],
+          [EditorEntityTab.JS]: ["js_id"],
+        },
+      });
+
+      const { getByTestId } = render(
+        <Route path={BUILDER_PATH}>
+          <IDE />
+        </Route>,
+        {
+          url: "/app/applicationSlug/pageSlug-page_id/edit/jsObjects/js_id",
+          initialState: state,
+          featureFlags: FeatureFlags,
+        },
+      );
+
+      // Normal JS object should be editable
+      const normalJsObjectEntity = getByTestId("t--entity-item-Normal");
+      expect(normalJsObjectEntity.classList.contains("editable")).toBe(true);
+
+      // should have `t--context-menu` as a child of the normalJsObjectEntity
+      expect(
+        normalJsObjectEntity.querySelector(".t--context-menu"),
+      ).not.toBeNull();
+
+      // Main JS object should not be editable
+      const mainJsObjectEntity = getByTestId("t--entity-item-Main");
+      expect(mainJsObjectEntity.classList.contains("editable")).toBe(false);
+      // should not have `t--context-menu` as a child of the mainJsObjectEntity
+      expect(mainJsObjectEntity.querySelector(".t--context-menu")).toBeNull();
+    });
   });
 });