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

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",
+}

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