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

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,13 +29,17 @@ const Router = createRouterComponent(router);
 router.once(() => {
   ReactDOM.render(
     <React.StrictMode>
-      <ApolloProvider client={client}>
-        <MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
-          <Router>
-            <App />
-          </Router>
-        </MuiPickersUtilsProvider>
-      </ApolloProvider>
+      <ConfirmProvider>
+        <SnackbarProvider maxSnack={5}>
+          <ApolloProvider client={client}>
+            <MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
+              <Router>
+                <App />
+              </Router>
+            </MuiPickersUtilsProvider>
+          </ApolloProvider>
+        </SnackbarProvider>
+      </ConfirmProvider>
     </React.StrictMode>,
     document.getElementById("root")
   );

src/pipelines/pipeline-list.tsx

@@ -27,8 +27,12 @@ export const PipelineList: FC<Props> = ({ projectId }) => {
   return (
     <List>
       {data?.pipelines.map((pipeline) => (
-        <Link name="pipeline-details" params={{pipelineId: pipeline.id}}>
-          <Item pipeline={pipeline} key={pipeline.id} />
+        <Link
+          name="pipeline-details"
+          params={{ pipelineId: pipeline.id }}
+          key={pipeline.id}
+        >
+          <Item pipeline={pipeline} />
         </Link>
       ))}
     </List>

src/projects/project-detail.tsx

@@ -48,7 +48,7 @@ export const ProjectDetail: FC<Props> = ({ project }) => {
           </Grid>
           <Grid item>
             <Link name="edit-project" params={{ projectId: project.id }}>
-              <IconButton style={{ color: "white" }}>{<Edit />}</IconButton>
+              <IconButton color="inherit">{<Edit />}</IconButton>
             </Link>
           </Grid>
         </Grid>

src/projects/project-editor.tsx

@@ -1,14 +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 { FC } from "react";
-import {
-  Project,
-} from "../generated/graphql";
+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>;
 
@@ -51,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);
 
@@ -60,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`
@@ -84,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>
@@ -104,6 +124,9 @@ export const ProjectEditor: FC<Props> = ({ project }) => {
           },
         });
       }
+      enqueueSnackbar("Saved successfully", {
+        variant: "success",
+      });
       router.navigate({
         url: router.url({
           name: "project-detail",
@@ -118,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({