Add StopPropagation helper back to table menus

Author: cephalization

app/src/components/experiment/ExperimentActionMenu.tsx

@@ -26,6 +26,7 @@ import {
   DialogTitle,
   DialogTitleExtra,
 } from "@phoenix/components/dialog";
+import { StopPropagation } from "@phoenix/components/StopPropagation";
 import { useNotifyError, useNotifySuccess } from "@phoenix/contexts";
 import { assertUnreachable } from "@phoenix/typeUtils";
 import { getErrorMessagesFromRelayMutationError } from "@phoenix/utils/errorUtils";
@@ -163,7 +164,7 @@ export function ExperimentActionMenu(props: ExperimentActionMenuProps) {
   }
 
   return (
-    <>
+    <StopPropagation>
       <MenuTrigger>
         <Button
           aria-label="Experiment action menu"
@@ -272,6 +273,6 @@ export function ExperimentActionMenu(props: ExperimentActionMenuProps) {
           </Dialog>
         </Modal>
       </ModalOverlay>
-    </>
+    </StopPropagation>
   );
 }

app/src/pages/datasets/DatasetActionMenu.tsx

@@ -11,6 +11,7 @@ import {
   Popover,
   Text,
 } from "@phoenix/components";
+import { StopPropagation } from "@phoenix/components/StopPropagation";
 
 import { DeleteDatasetDialog } from "./DeleteDatasetDialog";
 import { EditDatasetDialog } from "./EditDatasetDialog";
@@ -45,7 +46,7 @@ export function DatasetActionMenu(props: DatasetActionMenuProps) {
   const [isEditOpen, setIsEditOpen] = useState(false);
 
   return (
-    <>
+    <StopPropagation>
       <MenuTrigger>
         <Button
           size="S"
@@ -111,6 +112,6 @@ export function DatasetActionMenu(props: DatasetActionMenuProps) {
         isOpen={isEditOpen}
         onOpenChange={setIsEditOpen}
       />
-    </>
+    </StopPropagation>
   );
 }

app/src/pages/datasets/NewDatasetActionMenu.tsx

@@ -18,6 +18,7 @@ import {
   Popover,
 } from "@phoenix/components";
 import { CreateDatasetForm } from "@phoenix/components/dataset/CreateDatasetForm";
+import { StopPropagation } from "@phoenix/components/StopPropagation";
 import { useNotifyError, useNotifySuccess } from "@phoenix/contexts";
 import { getErrorMessagesFromRelayMutationError } from "@phoenix/utils/errorUtils";
 
@@ -48,7 +49,7 @@ export function NewDatasetActionMenu({
     setDatasetFromCSVDialogOpen(true);
   };
   return (
-    <>
+    <StopPropagation>
       <MenuTrigger>
         <Button leadingVisual={<Icon svg={<Icons.DatabaseOutline />} />}>
           Create Dataset
@@ -153,6 +154,6 @@ export function NewDatasetActionMenu({
           </Modal>
         </ModalOverlay>
       </DialogTrigger>
-    </>
+    </StopPropagation>
   );
 }

app/src/pages/experiments/DownloadExperimentActionMenu.tsx

@@ -7,6 +7,7 @@ import {
   MenuTrigger,
   Popover,
 } from "@phoenix/components";
+import { StopPropagation } from "@phoenix/components/StopPropagation";
 import { prependBasename } from "@phoenix/utils/routingUtils";
 interface DownloadExperimentActionMenuProps {
   experimentId: string;
@@ -16,32 +17,34 @@ export function DownloadExperimentActionMenu({
   experimentId,
 }: DownloadExperimentActionMenuProps) {
   return (
-    <MenuTrigger>
-      <Button
-        size="S"
-        leadingVisual={<Icon svg={<Icons.DownloadOutline />} />}
-      />
-      <Popover>
-        <Menu
-          onAction={(action) => {
-            if (action === "csv") {
-              window.open(
-                prependBasename(`/v1/experiments/${experimentId}/csv`),
-                "_blank"
-              );
-            }
-            if (action === "json") {
-              window.open(
-                prependBasename(`/v1/experiments/${experimentId}/json`),
-                "_blank"
-              );
-            }
-          }}
-        >
-          <MenuItem id="csv">Download CSV</MenuItem>
-          <MenuItem id="json">Download JSON</MenuItem>
-        </Menu>
-      </Popover>
-    </MenuTrigger>
+    <StopPropagation>
+      <MenuTrigger>
+        <Button
+          size="S"
+          leadingVisual={<Icon svg={<Icons.DownloadOutline />} />}
+        />
+        <Popover>
+          <Menu
+            onAction={(action) => {
+              if (action === "csv") {
+                window.open(
+                  prependBasename(`/v1/experiments/${experimentId}/csv`),
+                  "_blank"
+                );
+              }
+              if (action === "json") {
+                window.open(
+                  prependBasename(`/v1/experiments/${experimentId}/json`),
+                  "_blank"
+                );
+              }
+            }}
+          >
+            <MenuItem id="csv">Download CSV</MenuItem>
+            <MenuItem id="json">Download JSON</MenuItem>
+          </Menu>
+        </Popover>
+      </MenuTrigger>
+    </StopPropagation>
   );
 }

app/src/pages/projects/ProjectActionMenu.tsx

@@ -24,6 +24,7 @@ import {
   DialogTitle,
   DialogTitleExtra,
 } from "@phoenix/components/dialog";
+import { StopPropagation } from "@phoenix/components/StopPropagation";
 import { useNotifySuccess } from "@phoenix/contexts";
 
 import { ProjectActionMenuClearMutation } from "./__generated__/ProjectActionMenuClearMutation.graphql";
@@ -112,7 +113,7 @@ export function ProjectActionMenu({
   }, []);
 
   return (
-    <>
+    <StopPropagation>
       <MenuTrigger>
         <Button
           size="S"
@@ -307,6 +308,6 @@ export function ProjectActionMenu({
           </Modal>
         </ModalOverlay>
       </DialogTrigger>
-    </>
+    </StopPropagation>
   );
 }

app/src/pages/prompts/PromptActionMenu.tsx

@@ -12,6 +12,7 @@ import {
   Modal,
   Popover,
 } from "@phoenix/components";
+import { StopPropagation } from "@phoenix/components/StopPropagation";
 
 import { DeletePromptDialog } from "./DeletePromptDialog";
 
@@ -33,7 +34,7 @@ export function PromptActionMenu({
   }, []);
 
   return (
-    <>
+    <StopPropagation>
       <MenuTrigger>
         <Button
           size="S"
@@ -78,6 +79,6 @@ export function PromptActionMenu({
           />
         </Modal>
       </DialogTrigger>
-    </>
+    </StopPropagation>
   );
 }

app/src/pages/settings/RetentionPolicyActionMenu.tsx

@@ -23,6 +23,7 @@ import {
   Text,
   View,
 } from "@phoenix/components";
+import { StopPropagation } from "@phoenix/components/StopPropagation";
 
 import { EditRetentionPolicy } from "./EditRetentionPolicy";
 
@@ -77,7 +78,7 @@ export const RetentionPolicyActionMenu = ({
   `);
 
   return (
-    <>
+    <StopPropagation>
       <MenuTrigger>
         <Button
           size="S"
@@ -231,6 +232,6 @@ export const RetentionPolicyActionMenu = ({
           </Modal>
         </ModalOverlay>
       </DialogTrigger>
-    </>
+    </StopPropagation>
   );
 };

app/src/pages/settings/UserActionMenu.tsx

@@ -13,6 +13,7 @@ import {
   ModalOverlay,
   Popover,
 } from "@phoenix/components";
+import { StopPropagation } from "@phoenix/components/StopPropagation";
 
 import { AuthMethod } from "./__generated__/UsersTable_users.graphql";
 import { DeleteUserDialog } from "./DeleteUserDialog";
@@ -75,7 +76,7 @@ export function UserActionMenu(props: UserActionMenuProps) {
   }, [authMethod]);
 
   return (
-    <>
+    <StopPropagation>
       <MenuTrigger>
         <Button
           size="S"
@@ -129,6 +130,6 @@ export function UserActionMenu(props: UserActionMenuProps) {
           </Modal>
         </ModalOverlay>
       </DialogTrigger>
-    </>
+    </StopPropagation>
   );
 }