17 changed files with 10451 additions and 12345 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -7,16 +7,15 @@
    "@craco/craco": "^6.3.0",
    "@curi/react-dom": "^2.0.4",
    "@curi/router": "^2.1.2",
-    "@emotion/react": "^11.4.1",
-    "@emotion/styled": "^11.3.0",
+    "@date-io/date-fns": "^1.3.13",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@hickory/browser": "^2.1.0",
-    "@mui/icons-material": "^5.0.1",
-    "@mui/lab": "^5.0.0-alpha.49",
-    "@mui/material": "^5.0.2",
-    "@mui/styles": "^5.0.1",
+    "@material-ui/core": "^4.11.3",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "*",
+    "@material-ui/pickers": "^3.3.10",
    "@testing-library/jest-dom": "^5.11.10",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
@ -45,7 +44,7 @@
    "yup": "^0.32.9"
  },
  "scripts": {
-    "start": "BROWSER=none PORT=auto craco start",
+    "start": "BROWSER=none craco start",
    "build": "craco build",
    "test": "craco test",
    "prestart": "npm run graphql",
--- a/src/App.tsx
+++ b/src/App.tsx
@ -3,9 +3,9 @@ import './App.css';
 import { DefaultLayout } from './layouts';

 function App() {
-  const { response } = useResponse();
+const { response } = useResponse();

-  const { body: Body } = response;
+const { body: Body } = response;
  return (
    <DefaultLayout>
      <Body response={response} />
--- a/src/commits/commit-list.tsx
+++ b/src/commits/commit-list.tsx
@ -13,10 +13,10 @@ import {
  ListItemIcon,
  ListItemSecondaryAction,
  ListItemText,
+  makeStyles,
  useTheme,
-} from "@mui/material";
-import { makeStyles } from "@mui/styles";
-import withStyles from "@mui/styles/withStyles";
+  withStyles,
+} from "@material-ui/core";
 import {
  Cancel,
  CheckCircle,
@ -24,7 +24,7 @@ import {
  ShoppingCart,
  Stop,
  Timer,
-} from "@mui/icons-material";
+} from "@material-ui/icons";
 import { format } from "date-fns";
 import { useSnackbar } from "notistack";
 import { complement, equals, find, propEq, takeWhile } from "ramda";
@ -133,10 +133,11 @@ const Item: FC<{ commit: Commit; pipeline: Pipeline }> = ({
 }) => {
  const [isOpen, setOpen] = useState(() => false);

-  const [createTask, { loading }] = useMutation<
-    { createPipelineTask: PipelineTask },
-    { task: CreatePipelineTaskInput }
-  >(CREATE_PIPELINE_TASK);
+  const [createTask, { loading }] =
+    useMutation<
+      { createPipelineTask: PipelineTask },
+      { task: CreatePipelineTaskInput }
+    >(CREATE_PIPELINE_TASK);

  const units = useMemo(
    () => pipeline.workUnitMetadata.units.map((unit) => unit.type),
@ -180,7 +181,6 @@ const Item: FC<{ commit: Commit; pipeline: Pipeline }> = ({
              aria-label={pair[2]}
              disabled={loading}
              onClick={() => handleCreateTask(unit)}
-              size="large"
            >
              {pair[1]}
            </IconButton>
@ -257,7 +257,7 @@ const TaskItem: FC<{ task: PipelineTask }> = ({ task }) => {
      />
      <ListItemSecondaryAction>
        {task.status === TaskStatuses.Working && (
-          <IconButton edge="end" aria-label="stop" onClick={stop} size="large">
+          <IconButton edge="end" aria-label="stop" onClick={stop}>
            <Stop />
          </IconButton>
        )}
--- a/src/commons/auth/login.tsx
+++ b/src/commons/auth/login.tsx
@ -1,31 +1,28 @@
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "@material-ui/core";
 import { FC, Fragment, useEffect, useRef } from "react";
 import { useAuth } from "./auth.provider";
-const useStyles = makeStyles((theme) => {
-  debugger;
-  return {
-    iframe: {
-      height: "300px",
-      width: "500px",
-      position: "absolute",
-      top: "100px",
-      left: "50%",
-      transform: "translateX(-50%)",
-      zIndex: theme.zIndex.modal,
-      border: "none",
-      boxShadow: theme.shadows[4],
-    },
-    mask: {
-      top: "0",
-      left: "0",
-      bottom: "0",
-      right: "0",
-      position: "absolute",
-      backgroundColor: "rgba(0, 0, 0, 0.3)",
-      zIndex: theme.zIndex.modal,
-    },
-  };
-});
+const useStyles = makeStyles((theme) => ({
+  iframe: {
+    height: "300px",
+    width: "500px",
+    position: "absolute",
+    top: "100px",
+    left: "50%",
+    transform: "translateX(-50%)",
+    zIndex: theme.zIndex.modal,
+    border: "none",
+    boxShadow: theme.shadows[4],
+  },
+  mask: {
+    top: "0",
+    left: "0",
+    bottom: "0",
+    right: "0",
+    position: "absolute",
+    backgroundColor: "rgba(0, 0, 0, 0.3)",
+    zIndex: theme.zIndex.modal,
+  },
+}));

 export const Login: FC = () => {
  const iframeRef = useRef<HTMLIFrameElement>(null);
--- a/src/commons/fallbacks/error-page.tsx
+++ b/src/commons/fallbacks/error-page.tsx
@ -1,4 +1,4 @@
-import { Typography } from '@mui/material';
+import { Typography } from '@material-ui/core';
 import React, { FC } from 'react';

 export const ErrorPage: FC = ({children}) => {
--- a/src/commons/route/router.tsx
+++ b/src/commons/route/router.tsx
@ -4,7 +4,7 @@ import { createRouter, announce } from "@curi/router";
 import { browser } from "@hickory/browser";
 import { FC, useEffect, useState } from "react";
 import routes from "../../routes";
-import { LinearProgress } from "@mui/material";
+import { LinearProgress } from "@material-ui/core";

 const Component: FC = ({ children }) => {
  const client = useApolloClient();
--- a/src/generated/graphql.schema.json
+++ b/src/generated/graphql.schema.json
@ -167,6 +167,178 @@
        "enumValues": null,
        "possibleTypes": null
      },
+      {
+        "kind": "OBJECT",
+        "name": "Configuration",
+        "description": null,
+        "fields": [
+          {
+            "name": "id",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "ID",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "pipeline",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "OBJECT",
+                "name": "Pipeline",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "pipelineId",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "project",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "OBJECT",
+                "name": "Project",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "projectId",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "content",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "name",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "language",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "ENUM",
+                "name": "ConfigurationLanguage",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          }
+        ],
+        "inputFields": null,
+        "interfaces": [],
+        "enumValues": null,
+        "possibleTypes": null
+      },
+      {
+        "kind": "SCALAR",
+        "name": "ID",
+        "description": "The `ID` scalar type represents a unique identifier, often used to refetch an object or as key for a cache. The ID type appears in a JSON response as a String; however, it is not intended to be human-readable. When expected as an input type, any string (such as `\"4\"`) or integer (such as `4`) input value will be accepted as an ID.",
+        "fields": null,
+        "inputFields": null,
+        "interfaces": null,
+        "enumValues": null,
+        "possibleTypes": null
+      },
+      {
+        "kind": "ENUM",
+        "name": "ConfigurationLanguage",
+        "description": null,
+        "fields": null,
+        "inputFields": null,
+        "interfaces": null,
+        "enumValues": [
+          {
+            "name": "JavaScript",
+            "description": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "YAML",
+            "description": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          }
+        ],
+        "possibleTypes": null
+      },
      {
        "kind": "INPUT_OBJECT",
        "name": "CreatePipelineInput",
@ -844,6 +1016,39 @@
            },
            "isDeprecated": false,
            "deprecationReason": null
+          },
+          {
+            "name": "setConfiguration",
+            "description": null,
+            "args": [
+              {
+                "name": "setConfigurationInput",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "INPUT_OBJECT",
+                    "name": "SetConfigurationInput",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              }
+            ],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "OBJECT",
+                "name": "Configuration",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
          }
        ],
        "inputFields": null,
@ -978,16 +1183,6 @@
        "enumValues": null,
        "possibleTypes": null
      },
-      {
-        "kind": "SCALAR",
-        "name": "ID",
-        "description": "The `ID` scalar type represents a unique identifier, often used to refetch an object or as key for a cache. The ID type appears in a JSON response as a String; however, it is not intended to be human-readable. When expected as an input type, any string (such as `\"4\"`) or integer (such as `4`) input value will be accepted as an ID.",
-        "fields": null,
-        "inputFields": null,
-        "interfaces": null,
-        "enumValues": null,
-        "possibleTypes": null
-      },
      {
        "kind": "OBJECT",
        "name": "PipelineTask",
@ -1783,6 +1978,59 @@
            },
            "isDeprecated": false,
            "deprecationReason": null
+          },
+          {
+            "name": "getConfiguration",
+            "description": null,
+            "args": [
+              {
+                "name": "pipelineId",
+                "description": null,
+                "type": {
+                  "kind": "SCALAR",
+                  "name": "String",
+                  "ofType": null
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              },
+              {
+                "name": "projectId",
+                "description": null,
+                "type": {
+                  "kind": "SCALAR",
+                  "name": "String",
+                  "ofType": null
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              },
+              {
+                "name": "id",
+                "description": null,
+                "type": {
+                  "kind": "SCALAR",
+                  "name": "String",
+                  "ofType": null
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              }
+            ],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "OBJECT",
+                "name": "Configuration",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
          }
        ],
        "inputFields": null,
@ -1790,6 +2038,81 @@
        "enumValues": null,
        "possibleTypes": null
      },
+      {
+        "kind": "INPUT_OBJECT",
+        "name": "SetConfigurationInput",
+        "description": null,
+        "fields": null,
+        "inputFields": [
+          {
+            "name": "pipelineId",
+            "description": null,
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "defaultValue": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "projectId",
+            "description": null,
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "defaultValue": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "content",
+            "description": null,
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "defaultValue": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "language",
+            "description": null,
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "ENUM",
+                "name": "ConfigurationLanguage",
+                "ofType": null
+              }
+            },
+            "defaultValue": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          }
+        ],
+        "interfaces": null,
+        "enumValues": null,
+        "possibleTypes": null
+      },
      {
        "kind": "OBJECT",
        "name": "Subscription",
--- a/src/generated/graphql.tsx
+++ b/src/generated/graphql.tsx
@ -26,6 +26,23 @@ export type Commit = {
  tasks: Array<PipelineTask>;
 };

+export type Configuration = {
+  __typename?: 'Configuration';
+  id: Scalars['ID'];
+  pipeline: Pipeline;
+  pipelineId: Scalars['String'];
+  project: Project;
+  projectId: Scalars['String'];
+  content: Scalars['String'];
+  name: Scalars['String'];
+  language: ConfigurationLanguage;
+};
+
+export enum ConfigurationLanguage {
+  JavaScript = 'JavaScript',
+  Yaml = 'YAML'
+}
+
 export type CreatePipelineInput = {
  projectId: Scalars['String'];
  branch: Scalars['String'];
@ -75,6 +92,7 @@ export type Mutation = {
  deletePipeline: Scalars['Float'];
  createPipelineTask: PipelineTask;
  stopPipelineTask: Scalars['Boolean'];
+  setConfiguration: Configuration;
 };


@ -117,6 +135,11 @@ export type MutationStopPipelineTaskArgs = {
  id: Scalars['String'];
 };

+
+export type MutationSetConfigurationArgs = {
+  setConfigurationInput: SetConfigurationInput;
+};
+
 export type Pipeline = {
  __typename?: 'Pipeline';
  id: Scalars['ID'];
@ -191,6 +214,7 @@ export type Query = {
  commits?: Maybe<Array<Commit>>;
  listPipelineTaskByPipelineId: Array<PipelineTask>;
  pipelineTask: PipelineTask;
+  getConfiguration: Configuration;
 };


@ -223,6 +247,20 @@ export type QueryPipelineTaskArgs = {
  id: Scalars['String'];
 };

+
+export type QueryGetConfigurationArgs = {
+  pipelineId?: Maybe<Scalars['String']>;
+  projectId?: Maybe<Scalars['String']>;
+  id?: Maybe<Scalars['String']>;
+};
+
+export type SetConfigurationInput = {
+  pipelineId: Scalars['String'];
+  projectId: Scalars['String'];
+  content: Scalars['String'];
+  language: ConfigurationLanguage;
+};
+
 export type Subscription = {
  __typename?: 'Subscription';
  syncCommits?: Maybe<Scalars['String']>;
--- a/src/index.tsx
+++ b/src/index.tsx
@ -5,44 +5,28 @@ import "fontsource-roboto";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { AppApolloClientProvider } from "./commons/graphql/client";
+import { MuiPickersUtilsProvider } from "@material-ui/pickers";
+import DateFnsUtils from "@date-io/date-fns";
+import zhLocale from "date-fns/locale/zh-CN";
 import { ConfirmProvider } from "material-ui-confirm";
 import { SnackbarProvider } from "notistack";
 import Router from "./commons/route/router";
 import { AuthProvider } from "./commons/auth/auth.provider";
-import { LocalizationProvider } from "@mui/lab";
-import AdapterDateFns from "@mui/lab/AdapterDateFns";
-import {
-  ThemeProvider,
-  Theme,
-  StyledEngineProvider,
-  createTheme,
-} from "@mui/material/styles";
-
-declare module "@mui/styles/defaultTheme" {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  interface DefaultTheme extends Theme {}
-}
-
-const theme = createTheme();

 ReactDOM.render(
  <React.StrictMode>
    <ConfirmProvider>
-      <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={theme}>
-          <SnackbarProvider maxSnack={5}>
-            <AuthProvider>
-              <AppApolloClientProvider>
-                <LocalizationProvider dateAdapter={AdapterDateFns}>
-                  <Router>
-                    <App />
-                  </Router>
-                </LocalizationProvider>
-              </AppApolloClientProvider>
-            </AuthProvider>
-          </SnackbarProvider>
-        </ThemeProvider>
-      </StyledEngineProvider>
+      <SnackbarProvider maxSnack={5}>
+        <AuthProvider>
+          <AppApolloClientProvider>
+            <MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
+              <Router>
+                <App />
+              </Router>
+            </MuiPickersUtilsProvider>
+          </AppApolloClientProvider>
+        </AuthProvider>
+      </SnackbarProvider>
    </ConfirmProvider>
  </React.StrictMode>,
  document.getElementById("root")
--- a/src/layouts/default.tsx
+++ b/src/layouts/default.tsx
@ -1,17 +1,20 @@
 import React, { FC, useCallback, useState } from "react";
 import clsx from "clsx";
-import { useTheme, Theme } from "@mui/material/styles";
-import createStyles from '@mui/styles/createStyles';
-import makeStyles from '@mui/styles/makeStyles';
-import Drawer from "@mui/material/Drawer";
-import AppBar from "@mui/material/AppBar";
-import Toolbar from "@mui/material/Toolbar";
-import CssBaseline from "@mui/material/CssBaseline";
-import Divider from "@mui/material/Divider";
-import IconButton from "@mui/material/IconButton";
-import MenuIcon from "@mui/icons-material/Menu";
-import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
-import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import {
+  createStyles,
+  makeStyles,
+  useTheme,
+  Theme,
+} from "@material-ui/core/styles";
+import Drawer from "@material-ui/core/Drawer";
+import AppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import Divider from "@material-ui/core/Divider";
+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 { HeaderContainerProvider } from "./header-container";
 const drawerWidth = 240;
@ -124,7 +127,7 @@ export const DefaultLayout: FC = ({ children }) => {
            className={clsx(classes.menuButton, {
              [classes.hide]: open,
            })}
-            size="large">
+          >
            <MenuIcon />
          </IconButton>
          <div className={classes.headerContaner} ref={onRefChange}></div>
@ -144,7 +147,7 @@ export const DefaultLayout: FC = ({ children }) => {
        }}
      >
        <div className={classes.toolbar}>
-          <IconButton onClick={handleDrawerClose} size="large">
+          <IconButton onClick={handleDrawerClose}>
            {theme.direction === "rtl" ? (
              <ChevronRightIcon />
            ) : (
--- a/src/pipeline-tasks/pipeline-task-detail.tsx
+++ b/src/pipeline-tasks/pipeline-task-detail.tsx
@ -1,6 +1,5 @@
 import { gql, useQuery, useSubscription } from "@apollo/client";
-import { LinearProgress, Typography } from "@mui/material";
-import makeStyles from '@mui/styles/makeStyles';
+import { LinearProgress, makeStyles, Typography } from "@material-ui/core";
 import { format } from "date-fns";
 import { FC, useState } from "react";
 import { ErrorPage } from "../commons/fallbacks/error-page";
--- a/src/pipelines/pipeline-editor.tsx
+++ b/src/pipelines/pipeline-editor.tsx
@ -1,8 +1,16 @@
 import { gql, Reference, useMutation } from "@apollo/client";
 import { useRouter } from "@curi/react-dom";
-import { Button, Grid, IconButton, LinearProgress, Paper, Portal, Typography } from "@mui/material";
-import makeStyles from '@mui/styles/makeStyles';
-import { Delete } from "@mui/icons-material";
+import {
+  Button,
+  Grid,
+  IconButton,
+  LinearProgress,
+  makeStyles,
+  Paper,
+  Portal,
+  Typography,
+} from "@material-ui/core";
+import { Delete } from "@material-ui/icons";
 import { FormikHelpers, Formik, Form, Field } from "formik";
 import { TextField, TextFieldProps } from "formik-material-ui";
 import { useConfirm } from "material-ui-confirm";
@ -168,12 +176,16 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
  return (
    <Paper className={classes.root}>
      <Portal container={headerContainer}>
-        <Grid container justifyContent="space-between" alignItems="center">
+        <Grid container justify="space-between" alignItems="center">
          <Typography variant="h6" component="h1">
            {isCreate ? "Create" : "Edit"} Pipeline
          </Typography>
          {isCreate ? null : (
-            <IconButton color="inherit" onClick={handleDelete} disabled={deleting} size="large">
+            <IconButton
+              color="inherit"
+              onClick={handleDelete}
+              disabled={deleting}
+            >
              <Delete />
            </IconButton>
          )}
--- a/src/pipelines/pipeline-list.tsx
+++ b/src/pipelines/pipeline-list.tsx
@ -7,14 +7,10 @@ import {
  ListItemText,
  ListItemSecondaryAction,
  IconButton,
-  Menu,
-  MenuItem,
-  PopoverPosition,
-} from "@mui/material";
-import { FC, MouseEventHandler, useMemo, useState } from "react";
+} from "@material-ui/core";
+import { FC, MouseEventHandler, useMemo } from "react";
 import { Pipeline, Project } from "../generated/graphql";
-import { CallMerge, Edit } from "@mui/icons-material";
-import { any, values } from "ramda";
+import { CallMerge, Edit } from "@material-ui/icons";

 interface Props {
  projectId: string;
@ -46,49 +42,18 @@ export const PipelineList: FC<Props> = ({ projectId }) => {
      project: data?.project,
    }));
  }, [data]);
-
-  const [contextMenu, setContextMenu] = useState<PopoverPosition>();
-
-  const handleContextMenu: MouseEventHandler = (event) => {
-    event.preventDefault();
-    setContextMenu({ top: event.clientY - 4, left: event.clientX - 2 });
-  };
-
-  const handleClose = () => {
-    setContextMenu(undefined);
-  };
-
  return (
-    <>
-      <List>
-        {pipelines?.map((pipeline) => (
-          <Link
-            name="pipeline-commits"
-            params={{ pipelineId: pipeline.id, projectId: projectId }}
-            key={pipeline.id}
-            onContextMenu={handleContextMenu}
-          >
-            <Item pipeline={pipeline} />
-          </Link>
-        ))}
-      </List>
-      <Menu
-        keepMounted
-        open={!!contextMenu}
-        onClose={handleClose}
-        anchorReference="anchorPosition"
-        anchorPosition={
-          contextMenu && any(Boolean, values(contextMenu))
-            ? contextMenu
-            : undefined
-        }
-      >
-        <MenuItem onClick={handleClose}>Copy</MenuItem>
-        <MenuItem onClick={handleClose}>Print</MenuItem>
-        <MenuItem onClick={handleClose}>Highlight</MenuItem>
-        <MenuItem onClick={handleClose}>Email</MenuItem>
-      </Menu>
-    </>
+    <List>
+      {pipelines?.map((pipeline) => (
+        <Link
+          name="pipeline-commits"
+          params={{ pipelineId: pipeline.id, projectId: projectId }}
+          key={pipeline.id}
+        >
+          <Item pipeline={pipeline} />
+        </Link>
+      ))}
+    </List>
  );
 };

@ -115,7 +80,7 @@ const Item = ({ pipeline }: { pipeline: Pipeline }) => {
        }
      />
      <ListItemSecondaryAction>
-        <IconButton edge="end" aria-label="edit" onClick={modify} size="large">
+        <IconButton edge="end" aria-label="edit" onClick={modify}>
          <Edit />
        </IconButton>
      </ListItemSecondaryAction>
--- a/src/projects/project-detail.tsx
+++ b/src/projects/project-detail.tsx
@ -1,13 +1,20 @@
 import { Project } from "../generated/graphql";
 import React, { FC, Fragment } from "react";
-import { IconButton, Grid, Paper, Portal, Typography, Box } from "@mui/material";
-import makeStyles from '@mui/styles/makeStyles';
+import {
+  IconButton,
+  Grid,
+  makeStyles,
+  Paper,
+  Portal,
+  Typography,
+  Box,
+} from "@material-ui/core";
 import { useHeaderContainer } from "../layouts";
 import { PipelineList } from "../pipelines/pipeline-list";
-import { Edit } from '@mui/icons-material';
+import { Edit } from '@material-ui/icons';
 import { Link } from '@curi/react-dom';
-import { Button } from "@mui/material";
-import { AddBox } from "@mui/icons-material";
+import { Button } from "@material-ui/core";
+import { AddBox } from "@material-ui/icons";

 interface Props {
  project: Project;
@ -38,7 +45,7 @@ export const ProjectDetail: FC<Props> = ({ project, children }) => {
          container
          spacing={3}
          direction="row"
-          justifyContent="space-between"
+          justify="space-between"
          alignItems="center"
        >
          <Grid item>
@ -51,7 +58,7 @@ export const ProjectDetail: FC<Props> = ({ project, children }) => {
          </Grid>
          <Grid item>
            <Link name="edit-project" params={{ projectId: project.id }}>
-              <IconButton color="inherit" size="large">{<Edit />}</IconButton>
+              <IconButton color="inherit">{<Edit />}</IconButton>
            </Link>
          </Grid>
        </Grid>
--- a/src/projects/project-editor.tsx
+++ b/src/projects/project-editor.tsx
@ -1,6 +1,14 @@
 import { gql, Reference, useMutation } from "@apollo/client";
-import { Button, LinearProgress, Paper, Portal, Typography, Grid, IconButton } from "@mui/material";
-import makeStyles from '@mui/styles/makeStyles';
+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";
@ -9,7 +17,7 @@ import { Project } from "../generated/graphql";
 import * as Yup from "yup";
 import { useRouter } from "@curi/react-dom";
 import { useHeaderContainer } from "../layouts";
-import DeleteIcon from "@mui/icons-material/Delete";
+import DeleteIcon from "@material-ui/icons/Delete";
 import { useConfirm } from "material-ui-confirm";
 import { useSnackbar } from "notistack";

@ -170,12 +178,16 @@ export const ProjectEditor: FC<Props> = ({ project }) => {
  return (
    <Paper className={classes.root}>
      <Portal container={headerContainer}>
-        <Grid container justifyContent="space-between" alignItems="center">
+        <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} size="large">
+            <IconButton
+              color="inherit"
+              onClick={handleDelete}
+              disabled={deleting}
+            >
              <DeleteIcon />
            </IconButton>
          )}
--- a/src/projects/project-panel.tsx
+++ b/src/projects/project-panel.tsx
@ -1,12 +1,11 @@
 import { gql, useQuery } from "@apollo/client";
 import { Link } from "@curi/react-dom";
-import { Box, List, ListItem, Theme } from "@mui/material";
-import makeStyles from '@mui/styles/makeStyles';
+import { Box, List, ListItem, makeStyles, Theme } from "@material-ui/core";
 import { FC } from "react";
 import { Project } from "../generated/graphql";
-import { ListItemText } from "@mui/material";
-import { Button } from "@mui/material";
-import { AddBox } from "@mui/icons-material";
+import { ListItemText } from "@material-ui/core";
+import { Button } from "@material-ui/core";
+import { AddBox } from "@material-ui/icons";
 import { ActiveLink } from "../commons/route/active-link";

 const PROJECTS = gql`