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

package-lock.json

@@ -30,6 +30,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",
@@ -15099,6 +15101,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/material-ui-confirm": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/material-ui-confirm/-/material-ui-confirm-2.1.2.tgz",
+      "integrity": "sha512-GdM1vFQfkj2kpeW2hLmTxznPmIjWVqWoYzV7Vhjh92UqItOFxLbV15lyakuWdHOn92Bx4y9rQuGHIDP6PENpmQ==",
+      "peerDependencies": {
+        "@material-ui/core": ">= 3.0.0",
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      }
+    },
     "node_modules/md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -15823,6 +15835,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/notistack": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/notistack/-/notistack-1.0.6.tgz",
+      "integrity": "sha512-/p7W9b3r3/LDXUpUjNgZqnYj+NYG3/4htZcyucOFftrDKEpveEMPFdPlvmoT9+N1L4GgcKEY9Vr9+Dxyk2FQcQ==",
+      "dependencies": {
+        "clsx": "^1.1.0",
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/notistack"
+      },
+      "peerDependencies": {
+        "@material-ui/core": "^4.0.0",
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      }
+    },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -37163,6 +37193,12 @@
         "object-visit": "^1.0.0"
       }
     },
+    "material-ui-confirm": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/material-ui-confirm/-/material-ui-confirm-2.1.2.tgz",
+      "integrity": "sha512-GdM1vFQfkj2kpeW2hLmTxznPmIjWVqWoYzV7Vhjh92UqItOFxLbV15lyakuWdHOn92Bx4y9rQuGHIDP6PENpmQ==",
+      "requires": {}
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -37755,6 +37791,15 @@
       "integrity": "sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==",
       "dev": true
     },
+    "notistack": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/notistack/-/notistack-1.0.6.tgz",
+      "integrity": "sha512-/p7W9b3r3/LDXUpUjNgZqnYj+NYG3/4htZcyucOFftrDKEpveEMPFdPlvmoT9+N1L4GgcKEY9Vr9+Dxyk2FQcQ==",
+      "requires": {
+        "clsx": "^1.1.0",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",

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",

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}>
+      <ConfirmProvider>
-        <MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
+        <SnackbarProvider maxSnack={5}>
-          <Router>
+          <ApolloProvider client={client}>
-            <App />
+            <MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
-          </Router>
+              <Router>
-        </MuiPickersUtilsProvider>
+                <App />
-      </ApolloProvider>
+              </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}}>
+        <Link
-          <Item pipeline={pipeline} key={pipeline.id} />
+          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 { gql, Reference, useMutation } from "@apollo/client";
-import { Button, LinearProgress, makeStyles, Paper } from "@material-ui/core";
+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 {
+import { Project } from "../generated/graphql";
-  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({