feat(projects): edit page header and delete button.

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,

package.json

@@ -25,6 +25,8 @@
     "formik-material-ui": "^3.0.1",
     "formik-material-ui-pickers": "^0.0.12",
     "graphql": "^15.5.0",
+    "material-ui-confirm": "^2.1.2",
+    "notistack": "^1.0.6",
     "ramda": "^0.27.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -66,15 +68,9 @@
     "@graphql-codegen/typescript": "1.21.1",
     "@graphql-codegen/typescript-operations": "1.17.15",
     "@graphql-codegen/typescript-react-apollo": "2.2.3",
-    "@types/autoprefixer": "^10.2.0",
-    "@types/graphql": "^14.5.0",
     "@types/ramda": "^0.27.40",
-    "@types/sass": "^1.16.0",
-    "@types/tailwindcss": "^2.0.2",
     "@types/yup": "^0.29.11",
     "autoprefixer": "^9.8.6",
-    "postcss": "^7.0.35",
-    "sass": "^1.32.11",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.2"
+    "postcss": "^7.0.35"
   }
 }

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>;
-  findPipeline: Pipeline;
+  pipelines: Array<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/index.tsx

@@ -13,6 +13,8 @@ import { createRouterComponent } from "@curi/react-dom";
 import { createRouter, announce } from "@curi/router";
 import { browser } from "@hickory/browser";
 import routes from "./routes";
+import { ConfirmProvider } from 'material-ui-confirm';
+import { SnackbarProvider } from 'notistack';
 
 const router = createRouter(browser, routes, {
   sideEffects: [
@@ -27,6 +29,8 @@ const Router = createRouterComponent(router);
 router.once(() => {
   ReactDOM.render(
     <React.StrictMode>
+      <ConfirmProvider>
+        <SnackbarProvider maxSnack={5}>
           <ApolloProvider client={client}>
             <MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
               <Router>
@@ -34,6 +38,8 @@ router.once(() => {
               </Router>
             </MuiPickersUtilsProvider>
           </ApolloProvider>
+        </SnackbarProvider>
+      </ConfirmProvider>
     </React.StrictMode>,
     document.getElementById("root")
   );

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,12 +72,19 @@ 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),
     },
   })
 );
@@ -93,6 +102,14 @@ 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 />
@@ -114,9 +131,7 @@ export const DefaultLayout: FC = ({children}) => {
           >
             <MenuIcon />
           </IconButton>
-            <Typography variant="h6" noWrap>
-              Mini variant drawer
-            </Typography>
+          <div className={classes.headerContaner} ref={onRefChange}></div>
         </Toolbar>
       </AppBar>
       <Drawer
@@ -147,8 +162,11 @@ export const DefaultLayout: FC = ({children}) => {
       </Drawer>
       <main className={classes.content}>
         <div className={classes.toolbar} />
+
+        <HeaderContainerProvider value={headerContainer}>
           {children}
+        </HeaderContainerProvider>
       </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,57 @@
+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 }}
+          key={pipeline.id}
+        >
+          <Item pipeline={pipeline} />
+        </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,71 @@
+import { Project } from "../generated/graphql";
+import React, { FC, Fragment } from "react";
+import { IconButton, Grid, makeStyles, Paper, Portal, Typography } from "@material-ui/core";
+import { useHeaderContainer } from "../layouts";
+import { PipelineList } from "../pipelines/pipeline-list";
+import { Edit } from '@material-ui/icons';
+import { Link } from '@curi/react-dom';
+
+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>
+            <Link name="edit-project" params={{ projectId: project.id }}>
+              <IconButton color="inherit">{<Edit />}</IconButton>
+            </Link>
+          </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

@@ -1,16 +1,25 @@
-import { gql, useMutation } from "@apollo/client";
-import { Button, LinearProgress, makeStyles, Paper } from "@material-ui/core";
+import { gql, Reference, useMutation } from "@apollo/client";
+import {
+  Button,
+  LinearProgress,
+  makeStyles,
+  Paper,
+  Portal,
+  Typography,
+  Grid,
+  IconButton,
+} 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 {
-  CreateProjectInput,
-  UpdateProjectInput,
-  Project,
-} from "../generated/graphql";
+import { FC } from "react";
+import { Project } from "../generated/graphql";
 import * as Yup from "yup";
 import { useRouter } from "@curi/react-dom";
+import { useHeaderContainer } from "../layouts";
+import DeleteIcon from "@material-ui/icons/Delete";
+import { useConfirm } from "material-ui-confirm";
+import { useSnackbar } from "notistack";
 
 type Values = Partial<Project>;
 
@@ -53,6 +62,12 @@ const UPDATE_PROJECT = gql`
   }
 `;
 
+const REMOVE_PROJECT = gql`
+  mutation RemoveProject($id: String!) {
+    removeProject(id: $id)
+  }
+`;
+
 export const ProjectEditor: FC<Props> = ({ project }) => {
   const isCreate = not("id" in project);
 
@@ -62,7 +77,7 @@ export const ProjectEditor: FC<Props> = ({ project }) => {
       update(cache, { data }) {
         cache.modify({
           fields: {
-            findProjects(exitingProjects = []) {
+            projects(exitingProjects = []) {
               const newProjectRef = cache.writeFragment({
                 data: data!.createProject,
                 fragment: gql`
@@ -86,6 +101,9 @@ export const ProjectEditor: FC<Props> = ({ project }) => {
   const [updateProject] = useMutation(UPDATE_PROJECT);
 
   const router = useRouter();
+
+  const { enqueueSnackbar } = useSnackbar();
+
   const submitForm = async (
     values: Values,
     formikHelpers: FormikHelpers<Values>
@@ -106,6 +124,9 @@ export const ProjectEditor: FC<Props> = ({ project }) => {
           },
         });
       }
+      enqueueSnackbar("Saved successfully", {
+        variant: "success",
+      });
       router.navigate({
         url: router.url({
           name: "project-detail",
@@ -120,9 +141,58 @@ export const ProjectEditor: FC<Props> = ({ project }) => {
     }
   };
 
+  const [removeProject, { loading: deleting }] = useMutation(REMOVE_PROJECT, {
+    variables: { id: project.id },
+    update(cache) {
+      cache.modify({
+        fields: {
+          projects(exitingProjects: Reference[] = [], { readField }) {
+            return exitingProjects.filter(
+              (ref) => project.id !== readField("id", ref)
+            );
+          },
+        },
+      });
+    },
+  });
+
+  const confirm = useConfirm();
+  const handleDelete = async () => {
+    try {
+      await confirm({ description: `This will delete ${project.name}.` });
+      await removeProject();
+      enqueueSnackbar("Deleted successfully", {
+        variant: "success",
+      });
+      router.navigate({
+        url: router.url({
+          name: "dashboard",
+        }),
+      });
+    } catch {}
+  };
+
+  const headerContainer = useHeaderContainer();
+
   const classes = useStyles();
   return (
     <Paper className={classes.root}>
+      <Portal container={headerContainer}>
+        <Grid container justify="space-between" alignItems="center">
+          <Typography variant="h6" component="h1">
+            {isCreate ? "Create" : "Edit"} Project
+          </Typography>
+          {isCreate ? null : (
+            <IconButton
+              color="inherit"
+              onClick={handleDelete}
+              disabled={deleting}
+            >
+              <DeleteIcon />
+            </IconButton>
+          )}
+        </Grid>
+      </Portal>
       <Formik
         initialValues={project}
         validationSchema={Yup.object({

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 { PROJECT } from './projects/queries';
+import { ProjectDetail, ProjectEditor, PROJECT } from "./projects";
 
 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() {
-      const body = import(
-        /* webpackChunkName: "article-editor" */ "./projects/project-panel"
-      ).then((m) => m.ProjectPanel);
-      return body;
+    async resolve(
+      matched,
+      { client }: { client: ApolloClient<InMemoryCache> }
+    ) {
+      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;
     },
   },
 ]);