diff --git a/src/commons/auth/login.tsx b/src/commons/auth/login.tsx index 0159a99..3bbac9c 100644 --- a/src/commons/auth/login.tsx +++ b/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", diff --git a/src/pipelines/pipeline-list.tsx b/src/pipelines/pipeline-list.tsx index f555e4f..a2a983a 100644 --- a/src/pipelines/pipeline-list.tsx +++ b/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 = ({ projectId }) => { })); }, [data]); - const [contextMenu, setContextMenu] = useState(); + 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 ( <> @@ -66,7 +88,7 @@ export const PipelineList: FC = ({ projectId }) => { name="pipeline-commits" params={{ pipelineId: pipeline.id, projectId: projectId }} key={pipeline.id} - onContextMenu={handleContextMenu} + onContextMenu={(ev) => handleContextMenu(ev, pipeline)} > @@ -76,33 +98,29 @@ export const PipelineList: FC = ({ projectId }) => { keepMounted open={!!contextMenu} onClose={handleClose} + onContextMenu={(ev) => handleContextMenu(ev, false)} anchorReference="anchorPosition" - anchorPosition={ - contextMenu && any(Boolean, values(contextMenu)) - ? contextMenu - : undefined - } + anchorPosition={contextMenu?.[0]} > - Copy - Print - Highlight - Email + Runtime Config + { + modify(); + handleClose(); + }} + > + Pipeline Config + + + + Delete + ); }; 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 ( { } /> - - - - - ); };