From 7296773ae078fad2e9bc06f2db81e8613fc2895c Mon Sep 17 00:00:00 2001
From: Alex Golovanov <alex@appsmith.com>
Date: Wed, 19 Feb 2025 11:30:53 +0300
Subject: [PATCH 1/3] feat: added an ads entity context menu template component

---
 .../EntityContextMenu.stories.tsx             | 34 +++++++++++++
 .../EntityContextMenu.styles.ts               | 12 +++++
 .../EntityContextMenu/EntityContextMenu.tsx   | 49 +++++++++++++++++++
 .../Templates/EntityContextMenu/constants.ts  |  4 ++
 .../src/Templates/EntityContextMenu/index.ts  |  1 +
 .../design-system/ads/src/Templates/index.ts  |  1 +
 6 files changed, 101 insertions(+)
 create mode 100644 app/client/packages/design-system/ads/src/Templates/EntityContextMenu/EntityContextMenu.stories.tsx
 create mode 100644 app/client/packages/design-system/ads/src/Templates/EntityContextMenu/EntityContextMenu.styles.ts
 create mode 100644 app/client/packages/design-system/ads/src/Templates/EntityContextMenu/EntityContextMenu.tsx
 create mode 100644 app/client/packages/design-system/ads/src/Templates/EntityContextMenu/constants.ts
 create mode 100644 app/client/packages/design-system/ads/src/Templates/EntityContextMenu/index.ts

diff --git a/app/client/packages/design-system/ads/src/Templates/EntityContextMenu/EntityContextMenu.stories.tsx b/app/client/packages/design-system/ads/src/Templates/EntityContextMenu/EntityContextMenu.stories.tsx
new file mode 100644
index 000000000000..16cf311d8ec4
--- /dev/null
+++ b/app/client/packages/design-system/ads/src/Templates/EntityContextMenu/EntityContextMenu.stories.tsx
@@ -0,0 +1,34 @@
+/* eslint-disable no-console */
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { MenuItem } from "../../Menu";
+import { EntityContextMenu } from "./EntityContextMenu";
+
+const meta: Meta<typeof EntityContextMenu> = {
+  title: "ADS/Templates/Entity Context Menu",
+  component: EntityContextMenu,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof EntityContextMenu>;
+
+export const Basic: Story = {
+  args: {
+    tooltipContent: "More actions",
+    children: (
+      <>
+        <MenuItem onClick={console.log} startIcon="edit-line">
+          Rename
+        </MenuItem>
+        <MenuItem onClick={console.log} startIcon="copy-control">
+          Copy
+        </MenuItem>
+        <MenuItem onClick={console.log} startIcon="delete">
+          Delete
+        </MenuItem>
+      </>
+    ),
+  },
+};
diff --git a/app/client/packages/design-system/ads/src/Templates/EntityContextMenu/EntityContextMenu.styles.ts b/app/client/packages/design-system/ads/src/Templates/EntityContextMenu/EntityContextMenu.styles.ts
new file mode 100644
index 000000000000..0faae06bd5dc
--- /dev/null
+++ b/app/client/packages/design-system/ads/src/Templates/EntityContextMenu/EntityContextMenu.styles.ts
@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+import { MenuContent as ADSMenuContent } from "../../Menu";
+
+export const MenuContent = styled(ADSMenuContent)`
+  width: 220px;
+  max-height: unset;
+`;
+
+export const ButtonContainer = styled.div`
+  position: relative;
+`;
diff --git a/app/client/packages/design-system/ads/src/Templates/EntityContextMenu/EntityContextMenu.tsx b/app/client/packages/design-system/ads/src/Templates/EntityContextMenu/EntityContextMenu.tsx
new file mode 100644
index 000000000000..18a0ba2a6777
--- /dev/null
+++ b/app/client/packages/design-system/ads/src/Templates/EntityContextMenu/EntityContextMenu.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import { useToggle } from "usehooks-ts";
+
+import { Button } from "../../Button";
+import { Menu, MenuTrigger } from "../../Menu";
+import { Tooltip } from "../../Tooltip";
+
+import { EntityClassNames } from "./constants";
+import * as Styled from "./EntityContextMenu.styles";
+
+interface Props {
+  children?: React.ReactNode[] | React.ReactNode;
+  tooltipContent: React.ReactNode;
+}
+
+export const EntityContextMenu = (props: Props) => {
+  const { children, tooltipContent } = props;
+  const [isMenuOpen, toggleMenuOpen] = useToggle();
+
+  return (
+    <Menu onOpenChange={toggleMenuOpen} open={isMenuOpen}>
+      <MenuTrigger className="t--context-menu">
+        <Styled.ButtonContainer>
+          <Tooltip
+            content={tooltipContent}
+            isDisabled={isMenuOpen}
+            mouseLeaveDelay={0}
+            placement="right"
+          >
+            <Button
+              className={EntityClassNames.CONTEXT_MENU}
+              data-testid="t--more-action-trigger"
+              isIconButton
+              kind="tertiary"
+              startIcon="more-2-fill"
+            />
+          </Tooltip>
+        </Styled.ButtonContainer>
+      </MenuTrigger>
+      <Styled.MenuContent
+        align="start"
+        className={`t--entity-context-menu ${EntityClassNames.CONTEXT_MENU_CONTENT}`}
+        side="right"
+      >
+        {children}
+      </Styled.MenuContent>
+    </Menu>
+  );
+};
diff --git a/app/client/packages/design-system/ads/src/Templates/EntityContextMenu/constants.ts b/app/client/packages/design-system/ads/src/Templates/EntityContextMenu/constants.ts
new file mode 100644
index 000000000000..5cacb913987f
--- /dev/null
+++ b/app/client/packages/design-system/ads/src/Templates/EntityContextMenu/constants.ts
@@ -0,0 +1,4 @@
+export enum EntityClassNames {
+  CONTEXT_MENU = "entity-context-menu",
+  CONTEXT_MENU_CONTENT = "entity-context-menu-content",
+}
diff --git a/app/client/packages/design-system/ads/src/Templates/EntityContextMenu/index.ts b/app/client/packages/design-system/ads/src/Templates/EntityContextMenu/index.ts
new file mode 100644
index 000000000000..0c9f3e2fc2d1
--- /dev/null
+++ b/app/client/packages/design-system/ads/src/Templates/EntityContextMenu/index.ts
@@ -0,0 +1 @@
+export { EntityContextMenu } from "./EntityContextMenu";
diff --git a/app/client/packages/design-system/ads/src/Templates/index.ts b/app/client/packages/design-system/ads/src/Templates/index.ts
index 119bfd669a2f..00debb2e7685 100644
--- a/app/client/packages/design-system/ads/src/Templates/index.ts
+++ b/app/client/packages/design-system/ads/src/Templates/index.ts
@@ -4,3 +4,4 @@ export * from "./Sidebar";
 export * from "./EditableEntityName";
 export * from "./EditableDismissibleTab";
 export * from "./EntityTabsHeader";
+export * from "./EntityContextMenu";

From 82b36adebc9ff846c5ce016ed07394fb442df176 Mon Sep 17 00:00:00 2001
From: Alex Golovanov <alex@appsmith.com>
Date: Wed, 19 Feb 2025 18:38:39 +0300
Subject: [PATCH 2/3] perf: add data-testid & default tooltip content

---
 .../EntityContextMenu/EntityContextMenu.tsx   | 19 +++++++++++++++----
 .../Templates/EntityContextMenu/constants.ts  |  3 +++
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/app/client/packages/design-system/ads/src/Templates/EntityContextMenu/EntityContextMenu.tsx b/app/client/packages/design-system/ads/src/Templates/EntityContextMenu/EntityContextMenu.tsx
index 18a0ba2a6777..70cb3e8a9354 100644
--- a/app/client/packages/design-system/ads/src/Templates/EntityContextMenu/EntityContextMenu.tsx
+++ b/app/client/packages/design-system/ads/src/Templates/EntityContextMenu/EntityContextMenu.tsx
@@ -5,16 +5,27 @@ import { Button } from "../../Button";
 import { Menu, MenuTrigger } from "../../Menu";
 import { Tooltip } from "../../Tooltip";
 
-import { EntityClassNames } from "./constants";
+import {
+  EntityClassNames,
+  DEFAULT_DATA_TEST_ID,
+  DEFAULT_TOOLTIP_CONTENT,
+} from "./constants";
+
 import * as Styled from "./EntityContextMenu.styles";
 
 interface Props {
+  dataTestid?: string;
   children?: React.ReactNode[] | React.ReactNode;
-  tooltipContent: React.ReactNode;
+  tooltipContent?: React.ReactNode;
 }
 
 export const EntityContextMenu = (props: Props) => {
-  const { children, tooltipContent } = props;
+  const {
+    children,
+    dataTestid = DEFAULT_DATA_TEST_ID,
+    tooltipContent = DEFAULT_TOOLTIP_CONTENT,
+  } = props;
+
   const [isMenuOpen, toggleMenuOpen] = useToggle();
 
   return (
@@ -29,7 +40,7 @@ export const EntityContextMenu = (props: Props) => {
           >
             <Button
               className={EntityClassNames.CONTEXT_MENU}
-              data-testid="t--more-action-trigger"
+              data-testid={dataTestid}
               isIconButton
               kind="tertiary"
               startIcon="more-2-fill"
diff --git a/app/client/packages/design-system/ads/src/Templates/EntityContextMenu/constants.ts b/app/client/packages/design-system/ads/src/Templates/EntityContextMenu/constants.ts
index 5cacb913987f..ef1a1287cd40 100644
--- a/app/client/packages/design-system/ads/src/Templates/EntityContextMenu/constants.ts
+++ b/app/client/packages/design-system/ads/src/Templates/EntityContextMenu/constants.ts
@@ -2,3 +2,6 @@ export enum EntityClassNames {
   CONTEXT_MENU = "entity-context-menu",
   CONTEXT_MENU_CONTENT = "entity-context-menu-content",
 }
+
+export const DEFAULT_DATA_TEST_ID = "t--more-action-trigger";
+export const DEFAULT_TOOLTIP_CONTENT = "More actions";

From dd82e813427014c0b71a25c75d9b39c96207e053 Mon Sep 17 00:00:00 2001
From: Alex Golovanov <alex@appsmith.com>
Date: Wed, 19 Feb 2025 18:40:29 +0300
Subject: [PATCH 3/3] chore: replace entity context menu with an ads template

---
 .../src/pages/AppIDE/components/JSEntityItem/JSEntityItem.tsx  | 3 +--
 .../AppIDE/components/QueryEntityItem/QueryEntityItem.tsx      | 3 +--
 .../src/pages/Editor/JSEditor/AppJSEditorContextMenu.tsx       | 3 +--
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/app/client/src/pages/AppIDE/components/JSEntityItem/JSEntityItem.tsx b/app/client/src/pages/AppIDE/components/JSEntityItem/JSEntityItem.tsx
index 90633dd6e2f3..def9e6e2900a 100644
--- a/app/client/src/pages/AppIDE/components/JSEntityItem/JSEntityItem.tsx
+++ b/app/client/src/pages/AppIDE/components/JSEntityItem/JSEntityItem.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from "react";
-import { EntityItem } from "@appsmith/ads";
+import { EntityItem, EntityContextMenu } from "@appsmith/ads";
 import type { AppState } from "ee/reducers";
 import { getJsCollectionByBaseId } from "ee/selectors/entitiesSelector";
 import { useDispatch, useSelector } from "react-redux";
@@ -20,7 +20,6 @@ import { jsCollectionIdURL } from "ee/RouteBuilder";
 import { JsFileIconV2 } from "pages/Editor/Explorer/ExplorerIcons";
 import { AppJSContextMenuItems } from "./AppJSContextMenuItems";
 import type { EntityItem as EntityItemProps } from "ee/IDE/Interfaces/EntityItem";
-import EntityContextMenu from "IDE/Components/EntityContextMenu";
 
 export const JSEntityItem = ({ item }: { item: EntityItemProps }) => {
   const jsAction = useSelector((state: AppState) =>
diff --git a/app/client/src/pages/AppIDE/components/QueryEntityItem/QueryEntityItem.tsx b/app/client/src/pages/AppIDE/components/QueryEntityItem/QueryEntityItem.tsx
index c5891c93a7f8..22119c28f975 100644
--- a/app/client/src/pages/AppIDE/components/QueryEntityItem/QueryEntityItem.tsx
+++ b/app/client/src/pages/AppIDE/components/QueryEntityItem/QueryEntityItem.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from "react";
-import { EntityItem } from "@appsmith/ads";
+import { EntityItem, EntityContextMenu } from "@appsmith/ads";
 import type { AppState } from "ee/reducers";
 import {
   getActionByBaseId,
@@ -25,7 +25,6 @@ import { useActiveActionBaseId } from "ee/pages/Editor/Explorer/hooks";
 import { PluginType } from "entities/Plugin";
 import { useParentEntityInfo } from "ee/IDE/hooks/useParentEntityInfo";
 import { AppQueryContextMenuItems } from "./AppQueryContextMenuItems";
-import EntityContextMenu from "IDE/Components/EntityContextMenu";
 import type { EntityItem as EntityItemProps } from "ee/IDE/Interfaces/EntityItem";
 
 export const QueryEntityItem = ({ item }: { item: EntityItemProps }) => {
diff --git a/app/client/src/pages/Editor/JSEditor/AppJSEditorContextMenu.tsx b/app/client/src/pages/Editor/JSEditor/AppJSEditorContextMenu.tsx
index 95289f271bf0..20c8859ebcbf 100644
--- a/app/client/src/pages/Editor/JSEditor/AppJSEditorContextMenu.tsx
+++ b/app/client/src/pages/Editor/JSEditor/AppJSEditorContextMenu.tsx
@@ -8,8 +8,7 @@ import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
 import type { JSCollection } from "entities/JSCollection";
 import { Copy, Delete, Move, Prettify } from "./ContextMenuItems";
 import { RenameMenuItem } from "IDE";
-import { MenuSeparator } from "@appsmith/ads";
-import EntityContextMenu from "IDE/Components/EntityContextMenu";
+import { MenuSeparator, EntityContextMenu } from "@appsmith/ads";
 import { InspectStateMenuItem } from "components/editorComponents/Debugger/StateInspector/CTAs";
 
 interface AppJSEditorContextMenuProps {