feat(pipelines): edit view.

src/pipelines/pipeline-list.tsx

@@ -1,9 +1,18 @@
-import { gql, useQuery } from '@apollo/client';
-import { Link } from '@curi/react-dom';
-import { List, ListItem, Typography, ListItemText } from '@material-ui/core';
-import { FC } from 'react';
-import { Pipeline } from '../generated/graphql';
-import { CallMerge } from '@material-ui/icons';
+import { gql, useQuery } from "@apollo/client";
+import { Link, useRouter } from "@curi/react-dom";
+import {
+  List,
+  ListItem,
+  Typography,
+  ListItemText,
+  ListItemSecondaryAction,
+  IconButton,
+} from "@material-ui/core";
+import { FC, MouseEventHandler, useMemo } from "react";
+import { Pipeline, Project } from "../generated/graphql";
+import { CallMerge, Edit } from "@material-ui/icons";
+import { clone } from "ramda";
+import { useEffect } from "react";
 
 interface Props {
   projectId: string;
@@ -16,16 +25,28 @@ const PIPELINES = gql`
       name
       branch
     }
+    project(id: $projectId) {
+      id
+    }
   }
-`
+`;
 
 export const PipelineList: FC<Props> = ({ projectId }) => {
-  const {data, loading} = useQuery<{pipelines: Pipeline[]}, {projectId: string}>(PIPELINES, {
-    variables: {projectId}
-  })
+  const { data, loading } = useQuery<
+    { pipelines: Pipeline[]; project: Project },
+    { projectId: string }
+  >(PIPELINES, {
+    variables: { projectId },
+  });
+  const pipelines = useMemo(() => {
+    return data?.pipelines?.map((pipeline) => ({
+      ...pipeline,
+      project: data?.project,
+    }));
+  }, [data]);
   return (
     <List>
-      {data?.pipelines.map((pipeline) => (
+      {pipelines?.map((pipeline) => (
         <Link
           name="pipeline-commits"
           params={{ pipelineId: pipeline.id, projectId: projectId }}
@@ -36,10 +57,19 @@ export const PipelineList: FC<Props> = ({ projectId }) => {
       ))}
     </List>
   );
-}
-
-const Item = ({pipeline}: {pipeline: Pipeline}) => {
+};
 
+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
@@ -51,6 +81,11 @@ const Item = ({pipeline}: {pipeline: Pipeline}) => {
           </Typography>
         }
       />
+      <ListItemSecondaryAction>
+        <IconButton edge="end" aria-label="edit" onClick={modify}>
+          <Edit />
+        </IconButton>
+      </ListItemSecondaryAction>
     </ListItem>
   );
-}
+};