feat(pipelines): 列表添加右键菜单。

src/commons/auth/login.tsx

@@ -2,7 +2,6 @@ import makeStyles from "@mui/styles/makeStyles";
 import { FC, Fragment, useEffect, useRef } from "react";
 import { useAuth } from "./auth.provider";
 const useStyles = makeStyles((theme) => {
-  debugger;
   return {
     iframe: {
       height: "300px",

src/pipelines/pipeline-list.tsx

@@ -10,11 +10,13 @@ import {
   Menu,
   MenuItem,
   PopoverPosition,
+  styled,
 } from "@mui/material";
-import { FC, MouseEventHandler, useMemo, useState } from "react";
+import { FC, MouseEventHandler, useMemo, useState, MouseEvent } from "react";
 import { Pipeline, Project } from "../generated/graphql";
 import { CallMerge, Edit } from "@mui/icons-material";
 import { any, values } from "ramda";
+import { Divider } from "@material-ui/core";
 
 interface Props {
   projectId: string;
@@ -47,17 +49,37 @@ export const PipelineList: FC<Props> = ({ projectId }) => {
     }));
   }, [data]);
 
-  const [contextMenu, setContextMenu] = useState<PopoverPosition>();
+  const [contextMenu, setContextMenu] = useState<[PopoverPosition, Pipeline]>();
+  const { navigate, url } = useRouter();
 
-  const handleContextMenu: MouseEventHandler = (event) => {
+  const handleContextMenu = (event: MouseEvent, pipeline: Pipeline | false) => {
     event.preventDefault();
-    setContextMenu({ top: event.clientY - 4, left: event.clientX - 2 });
+    if (pipeline) {
+      setContextMenu([
+        { top: event.clientY - 4, left: event.clientX - 2 },
+        pipeline,
+      ]);
+    } else {
+      setContextMenu(undefined);
+    }
   };
 
   const handleClose = () => {
     setContextMenu(undefined);
   };
 
+  const modify = () => {
+    navigate({
+      url: url({
+        name: "edit-pipeline",
+        params: {
+          pipelineId: contextMenu![1].id,
+          projectId: contextMenu![1].project.id,
+        },
+      }),
+    });
+  };
+
   return (
     <>
       <List>
@@ -66,7 +88,7 @@ export const PipelineList: FC<Props> = ({ projectId }) => {
             name="pipeline-commits"
             params={{ pipelineId: pipeline.id, projectId: projectId }}
             key={pipeline.id}
-            onContextMenu={handleContextMenu}
+            onContextMenu={(ev) => handleContextMenu(ev, pipeline)}
           >
             <Item pipeline={pipeline} />
           </Link>
@@ -76,33 +98,29 @@ export const PipelineList: FC<Props> = ({ projectId }) => {
         keepMounted
         open={!!contextMenu}
         onClose={handleClose}
+        onContextMenu={(ev) => handleContextMenu(ev, false)}
         anchorReference="anchorPosition"
-        anchorPosition={
-          contextMenu && any(Boolean, values(contextMenu))
-            ? contextMenu
-            : undefined
-        }
+        anchorPosition={contextMenu?.[0]}
       >
-        <MenuItem onClick={handleClose}>Copy</MenuItem>
-        <MenuItem onClick={handleClose}>Print</MenuItem>
-        <MenuItem onClick={handleClose}>Highlight</MenuItem>
-        <MenuItem onClick={handleClose}>Email</MenuItem>
+        <MenuItem onClick={handleClose}>Runtime Config</MenuItem>
+        <MenuItem
+          onClick={() => {
+            modify();
+            handleClose();
+          }}
+        >
+          Pipeline Config
+        </MenuItem>
+        <Divider />
+        <MenuItem sx={{ color: "error.main" }} onClick={handleClose}>
+          Delete
+        </MenuItem>
       </Menu>
     </>
   );
 };
 
 const Item = ({ pipeline }: { pipeline: Pipeline }) => {
-  const { navigate, url } = useRouter();
-  const modify: MouseEventHandler = (ev) => {
-    ev.preventDefault();
-    navigate({
-      url: url({
-        name: "edit-pipeline",
-        params: { pipelineId: pipeline.id, projectId: pipeline.project.id },
-      }),
-    });
-  };
   return (
     <ListItem button>
       <ListItemText
@@ -114,11 +132,6 @@ const Item = ({ pipeline }: { pipeline: Pipeline }) => {
           </Typography>
         }
       />
-      <ListItemSecondaryAction>
-        <IconButton edge="end" aria-label="edit" onClick={modify} size="large">
-          <Edit />
-        </IconButton>
-      </ListItemSecondaryAction>
     </ListItem>
   );
 };