feat: added an ads entity context menu template component

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>
+      </>
+    ),
+  },
+};

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;
+`;

app/client/packages/design-system/ads/src/Templates/EntityContextMenu/EntityContextMenu.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { useToggle } from "usehooks-ts";
+
+import { Button } from "../../Button";
+import { Menu, MenuTrigger } from "../../Menu";
+import { Tooltip } from "../../Tooltip";
+
+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;
+}
+
+export const EntityContextMenu = (props: Props) => {
+  const {
+    children,
+    dataTestid = DEFAULT_DATA_TEST_ID,
+    tooltipContent = DEFAULT_TOOLTIP_CONTENT,
+  } = 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={dataTestid}
+              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>
+  );
+};

app/client/packages/design-system/ads/src/Templates/EntityContextMenu/constants.ts

@@ -0,0 +1,7 @@
+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";

app/client/packages/design-system/ads/src/Templates/EntityContextMenu/index.ts

@@ -0,0 +1 @@
+export { EntityContextMenu } from "./EntityContextMenu";

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";

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) =>

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 }) => {

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 {