feat(projects, pipeline): project detail page.

src/projects/index.ts

@@ -0,0 +1,4 @@
+export * from './project-detail';
+export * from './project-panel';
+export * from './project-editor';
+export * from './queries';

src/projects/project-detail.tsx

@@ -0,0 +1,59 @@
+import { Project } from "../generated/graphql";
+import React, { FC, Fragment } from "react";
+import { Grid, makeStyles, Paper, Portal, Typography } from "@material-ui/core";
+import { useHeaderContainer } from "../layouts";
+import { PipelineList } from "../pipelines/pipeline-list";
+
+interface Props {
+  project: Project;
+}
+
+const useStyles = makeStyles(() => ({
+  root: {
+    height: "100%",
+    flex: "auto",
+    overflow: "hidden"
+  },
+  pipelineListContainer: {
+    height: "100%",
+    width: "100%",
+    overflow: "auto"
+  },
+}));
+
+export const ProjectDetail: FC<Props> = ({ project }) => {
+  const headerContainer = useHeaderContainer();
+
+  const classes = useStyles();
+
+  return (
+    <Fragment>
+      <Portal container={headerContainer}>
+        <Grid
+          container
+          spacing={3}
+          direction="row"
+          justify="space-between"
+          alignItems="center"
+        >
+          <Grid item>
+            <Typography component="h1" variant="h6" noWrap>
+              {project.name}
+            </Typography>
+            <Typography variant="subtitle2" gutterBottom noWrap>
+              {project.comment}
+            </Typography>
+          </Grid>
+          <Grid item>Options</Grid>
+        </Grid>
+      </Portal>
+      <Grid container spacing={1} direction="row" alignItems="stretch" className={classes.root}>
+        <Grid item xs={3} style={{height: '100%', display: 'flex'}}>
+          <Paper className={classes.pipelineListContainer}>
+            <PipelineList projectId={project.id} />
+          </Paper>
+        </Grid>
+      </Grid>
+    </Fragment>
+  );
+};

src/projects/project-editor.tsx

@@ -3,10 +3,8 @@ import { Button, LinearProgress, makeStyles, Paper } from "@material-ui/core";
 import { Form, Formik, Field, FormikHelpers } from "formik";
 import { TextField } from "formik-material-ui";
 import { not } from "ramda";
-import React, { FC } from "react";
+import { FC } from "react";
 import {
-  CreateProjectInput,
-  UpdateProjectInput,
   Project,
 } from "../generated/graphql";
 import * as Yup from "yup";

src/projects/project-panel.tsx

@@ -1,7 +1,6 @@
 import { gql, useQuery } from '@apollo/client';
 import { Link, useRouter } from '@curi/react-dom';
 import { Box, List, ListItem } from '@material-ui/core';
-import { makeStyles, Theme, createStyles } from '@material-ui/core';
 import { find, propEq } from 'ramda';
 import React, { useState, FC, useEffect } from 'react';
 import { Project } from '../generated/graphql';
@@ -22,12 +21,6 @@ const PROJECTS = gql`
   }
 `;
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    
-  })
-);
-
 export function ProjectPanel() {
   return (
     <section>
@@ -68,7 +61,7 @@ const ProjectList: FC<{}> = () => {
 
   const items = projects?.map((item) => (
     <Link
-      name="edit-project"
+      name="project-detail"
       params={{ projectId: item.id }}
       key={item.id}
       onNav={() => setCurrentProject(item)}