feat(projects, pipeline): project detail page.

graphql.schema.json

@@ -644,7 +644,7 @@
             "deprecationReason": null
           },
           {
-            "name": "modifyPipeline",
+            "name": "updatePipeline",
             "description": null,
             "args": [
               {
@@ -662,22 +662,6 @@
                 "defaultValue": null,
                 "isDeprecated": false,
                 "deprecationReason": null
-              },
-              {
-                "name": "id",
-                "description": null,
-                "type": {
-                  "kind": "NON_NULL",
-                  "name": null,
-                  "ofType": {
-                    "kind": "SCALAR",
-                    "name": "String",
-                    "ofType": null
-                  }
-                },
-                "defaultValue": null,
-                "isDeprecated": false,
-                "deprecationReason": null
               }
             ],
             "type": {
@@ -1427,7 +1411,7 @@
             "deprecationReason": null
           },
           {
-            "name": "listPipelines",
+            "name": "pipelines",
             "description": null,
             "args": [
               {
@@ -1464,7 +1448,7 @@
             "deprecationReason": null
           },
           {
-            "name": "findPipeline",
+            "name": "pipeline",
             "description": null,
             "args": [
               {
@@ -1790,6 +1774,22 @@
             "defaultValue": null,
             "isDeprecated": false,
             "deprecationReason": null
+          },
+          {
+            "name": "id",
+            "description": null,
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "defaultValue": null,
+            "isDeprecated": false,
+            "deprecationReason": null
           }
         ],
         "interfaces": null,

src/generated/graphql.tsx

@@ -66,7 +66,7 @@ export type Mutation = {
   updateProject: Project;
   removeProject: Scalars['Float'];
   createPipeline: Pipeline;
-  modifyPipeline: Pipeline;
+  updatePipeline: Pipeline;
   deletePipeline: Scalars['Float'];
   createPipelineTask: PipelineTask;
 };
@@ -92,9 +92,8 @@ export type MutationCreatePipelineArgs = {
 };
 
 
-export type MutationModifyPipelineArgs = {
+export type MutationUpdatePipelineArgs = {
   Pipeline: UpdatePipelineInput;
-  id: Scalars['String'];
 };
 
 
@@ -171,8 +170,8 @@ export type Query = {
   hello: Hello;
   projects: Array<Project>;
   project: Project;
-  listPipelines: Array<Pipeline>;
+  pipelines: Array<Pipeline>;
-  findPipeline: Pipeline;
+  pipeline: Pipeline;
   listPipelineTaskByPipelineId: Array<PipelineTask>;
   findPipelineTask: PipelineTask;
 };
@@ -183,12 +182,12 @@ export type QueryProjectArgs = {
 };
 
 
-export type QueryListPipelinesArgs = {
+export type QueryPipelinesArgs = {
   projectId?: Maybe<Scalars['String']>;
 };
 
 
-export type QueryFindPipelineArgs = {
+export type QueryPipelineArgs = {
   id: Scalars['String'];
 };
 
@@ -237,6 +236,7 @@ export type UpdatePipelineInput = {
   branch: Scalars['String'];
   name: Scalars['String'];
   workUnitMetadata: WorkUnitMetadataInput;
+  id: Scalars['String'];
 };
 
 export type UpdateProjectInput = {

src/layouts/default.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import React, { FC, useCallback, useRef, useState } from "react";
 import clsx from "clsx";
 import {
   createStyles,
@@ -16,13 +16,15 @@ import IconButton from "@material-ui/core/IconButton";
 import MenuIcon from "@material-ui/icons/Menu";
 import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
 import ChevronRightIcon from "@material-ui/icons/ChevronRight";
-import { ProjectPanel } from '../projects/project-panel';
+import { ProjectPanel } from "../projects/project-panel";
+import { HeaderContainerProvider } from "./header-container";
 const drawerWidth = 240;
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       display: "flex",
+      overflow: "hidden",
     },
     appBar: {
       zIndex: theme.zIndex.drawer + 1,
@@ -70,17 +72,24 @@ const useStyles = makeStyles((theme: Theme) =>
       alignItems: "center",
       justifyContent: "flex-end",
       padding: theme.spacing(0, 1),
+      flex: "none",
       // necessary for content to be below app bar
       ...theme.mixins.toolbar,
     },
+    headerContaner: {
+      flex: "auto",
+    },
     content: {
       flexGrow: 1,
-      padding: theme.spacing(3),
+      height: "100vh",
+      display: "flex",
+      flexFlow: "column",
+      padding: theme.spacing(0),
     },
   })
 );
 
-export const DefaultLayout: FC = ({children}) => {
+export const DefaultLayout: FC = ({ children }) => {
   const classes = useStyles();
   const theme = useTheme();
   const [open, setOpen] = React.useState(true);
@@ -93,62 +102,71 @@ export const DefaultLayout: FC = ({children}) => {
     setOpen(false);
   };
 
+  const [headerContainer, setHeaderContainer] = useState(undefined);
+  const onRefChange = useCallback(
+    (node) => {
+      setHeaderContainer(node);
+    },
+    [setHeaderContainer]
+  );
+
   return (
     <div className={classes.root}>
-        <CssBaseline />
+      <CssBaseline />
-        <AppBar
+      <AppBar
-          position="fixed"
+        position="fixed"
-          className={clsx(classes.appBar, {
+        className={clsx(classes.appBar, {
-            [classes.appBarShift]: open,
+          [classes.appBarShift]: open,
-          })}
+        })}
-        >
+      >
-          <Toolbar>
+        <Toolbar>
-            <IconButton
+          <IconButton
-              color="inherit"
+            color="inherit"
-              aria-label="open drawer"
+            aria-label="open drawer"
-              onClick={handleDrawerOpen}
+            onClick={handleDrawerOpen}
-              edge="start"
+            edge="start"
-              className={clsx(classes.menuButton, {
+            className={clsx(classes.menuButton, {
-                [classes.hide]: open,
+              [classes.hide]: open,
-              })}
+            })}
-            >
+          >
-              <MenuIcon />
+            <MenuIcon />
-            </IconButton>
+          </IconButton>
-            <Typography variant="h6" noWrap>
+          <div className={classes.headerContaner} ref={onRefChange}></div>
-              Mini variant drawer
+        </Toolbar>
-            </Typography>
+      </AppBar>
-          </Toolbar>
+      <Drawer
-        </AppBar>
+        variant="permanent"
-        <Drawer
+        className={clsx(classes.drawer, {
-          variant="permanent"
+          [classes.drawerOpen]: open,
-          className={clsx(classes.drawer, {
+          [classes.drawerClose]: !open,
+        })}
+        classes={{
+          paper: clsx({
             [classes.drawerOpen]: open,
             [classes.drawerClose]: !open,
-          })}
+          }),
-          classes={{
+        }}
-            paper: clsx({
+      >
-              [classes.drawerOpen]: open,
+        <div className={classes.toolbar}>
-              [classes.drawerClose]: !open,
+          <IconButton onClick={handleDrawerClose}>
-            }),
+            {theme.direction === "rtl" ? (
-          }}
+              <ChevronRightIcon />
-        >
+            ) : (
-          <div className={classes.toolbar}>
+              <ChevronLeftIcon />
-            <IconButton onClick={handleDrawerClose}>
+            )}
-              {theme.direction === "rtl" ? (
+          </IconButton>
-                <ChevronRightIcon />
+        </div>
-              ) : (
+        <Divider />
-                <ChevronLeftIcon />
+        <ProjectPanel />
-              )}
+        <Divider />
-            </IconButton>
+      </Drawer>
-          </div>
+      <main className={classes.content}>
-          <Divider />
+        <div className={classes.toolbar} />
-          <ProjectPanel />
+
-          <Divider />
+        <HeaderContainerProvider value={headerContainer}>
-        </Drawer>
+          {children}
-        <main className={classes.content}>
+        </HeaderContainerProvider>
-          <div className={classes.toolbar} />
+      </main>
-          { children }
-        </main>
     </div>
   );
-}
+};

src/layouts/header-container.tsx

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+
+const Context = createContext<HTMLElement| undefined>(undefined);
+
+export const HeaderContainerProvider = Context.Provider;
+
+export const useHeaderContainer = () => useContext(Context);

src/layouts/index.tsx

@@ -1 +1,2 @@
 export * from './default';
+export * from './header-container';

src/pipelines/pipeline-list.tsx

@@ -0,0 +1,53 @@
+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 { Fragment } from 'react';
+import { CallMerge } from '@material-ui/icons';
+
+interface Props {
+  projectId: string;
+}
+
+const PIPELINES = gql`
+  query Pipelines($projectId: String!) {
+    pipelines(projectId: $projectId) {
+      id
+      name
+      branch
+    }
+  }
+`
+
+export const PipelineList: FC<Props> = ({ projectId }) => {
+  const {data, loading} = useQuery<{pipelines: Pipeline[]}, {projectId: string}>(PIPELINES, {
+    variables: {projectId}
+  })
+  return (
+    <List>
+      {data?.pipelines.map((pipeline) => (
+        <Link name="pipeline-details" params={{pipelineId: pipeline.id}}>
+          <Item pipeline={pipeline} key={pipeline.id} />
+        </Link>
+      ))}
+    </List>
+  );
+}
+
+const Item = ({pipeline}: {pipeline: Pipeline}) => {
+
+  return (
+    <ListItem button>
+      <ListItemText
+        primary={pipeline.name}
+        secondary={
+          <Typography component="span" variant="body2" color="textSecondary">
+            <CallMerge fontSize="small" />
+            {pipeline.branch}
+          </Typography>
+        }
+      />
+    </ListItem>
+  );
+}

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)}

src/routes.tsx

@@ -1,9 +1,9 @@
 import { ApolloClient, InMemoryCache } from "@apollo/client";
 import { prepareRoutes } from "@curi/router";
 import { omit } from 'ramda';
+import React from 'react';
 import { CreateProjectInput, Project } from './generated/graphql';
-import { ProjectEditor } from './projects/project-editor';
+import { ProjectDetail, ProjectEditor, PROJECT } from "./projects";
-import { PROJECT } from './projects/queries';
 
 export default prepareRoutes([
   {
@@ -30,7 +30,10 @@ export default prepareRoutes([
   {
     name: "edit-project",
     path: "projects/:projectId/edit",
-    async resolve(matched, { client }: { client: ApolloClient<InMemoryCache> }) {
+    async resolve(
+      matched,
+      { client }: { client: ApolloClient<InMemoryCache> }
+    ) {
       const { data } = await client.query<{ project: Project }>({
         query: PROJECT,
         variables: { id: matched?.params.projectId },
@@ -48,14 +51,22 @@ export default prepareRoutes([
   {
     name: "project-detail",
     path: "projects/:projectId",
-    resolve() {
+    async resolve(
-      const body = import(
+      matched,
-        /* webpackChunkName: "article-editor" */ "./projects/project-panel"
+      { client }: { client: ApolloClient<InMemoryCache> }
-      ).then((m) => m.ProjectPanel);
+    ) {
-      return body;
+      const { data } = await client.query<{ project: Project }>({
+        query: PROJECT,
+        variables: { id: matched?.params.projectId },
+      });
+      return {
+        body: () => (
+          <ProjectDetail project={omit(["__typename"], data.project)} />
+        ),
+      };
     },
     respond({ resolved }) {
-      return { body: resolved };
+      return resolved;
     },
   },
 ]);