feat(projects): list, create and update.

build: use pm2 serve for prod.
build(dep): remove @types/date-fns.
2021-05-04 21:08:00 +08:00 · 2021-05-03 12:03:18 +08:00 · 2021-05-03 10:35:30 +08:00 · 2021-05-03 10:21:42 +08:00 · 2021-05-02 22:14:16 +08:00 · 2021-05-01 17:45:31 +08:00
45 changed files with 12932 additions and 24245 deletions
--- a/.cracorc.js
+++ b/.cracorc.js
@ -1,21 +0,0 @@
-const { ServiceRegister } = require("configuration");
-
-module.exports = {
-  devServer: (devServerConfig) => {
-    devServerConfig.port = "auto";
-    devServerConfig.onListening = function (devServer) {
-      if (!devServer) {
-        throw new Error("webpack-dev-server is not defined");
-      }
-
-      const port = devServer.listeningApp.address().port;
-      const register = new ServiceRegister({
-        etcd: { hosts: ["http://rpi:2379"] },
-      });
-      register.register("fennec", `http://localhost:${port}/`);
-      console.log("Listening on port:", port);
-    };
-
-    return devServerConfig;
-  },
-};
--- a/.gitignore
+++ b/.gitignore
@ -21,5 +21,3 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
-.vscode/chrome
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -8,9 +8,10 @@
      "name": "chrome",
      "type": "chrome",
      "request": "launch",
-      "url": "http://fennec.localhost:7070/",
+      "reAttach": true,
+      "url": "http://fennec.localhost/",
      "webRoot": "${workspaceFolder}",
-      "userDataDir": ".vscode/chrome"
+      "userDataDir": "/Users/ivan/Projects/.chrome"
    }
  ]
 }
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,11 +1,8 @@
 {
  "cSpell.words": [
+    "Formik",
    "clsx",
    "fontsource",
-    "Formik",
-    "noconflict",
-    "notistack",
-    "unmount",
    "vditor"
  ]
 }
--- a/apollo.config.js
+++ b/apollo.config.js
@ -1,8 +1,8 @@
 module.exports = {
  client: {
    service: {
-      name: "fennec-be",
-      url: "http://localhost:7122/graphql",
-    },
-  },
+      name: 'fennec-be',
+      url: 'http://api.fennec.localhost/graphql'
+    }
+  }
 };
--- a/codegen.yml
+++ b/codegen.yml
@ -1,5 +1,5 @@
 overwrite: true
-schema: "http://localhost:7122/graphql"
+schema: "http://api.fennec.localhost/graphql"
 # documents: "src/**/*.graphql"
 generates:
  src/generated/graphql.tsx:
@ -7,6 +7,6 @@ generates:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"
-  src/generated/graphql.schema.json:
+  ./graphql.schema.json:
    plugins:
      - "introspection"
--- a/ecosystem.config.js
+++ b/ecosystem.config.js
@ -1,7 +1,7 @@
 module.exports = {
  apps: [
    {
-      name: "fennec-fe",
+      name: "fennec-bs",
      script: "serve",
      args: "",
      watch: false,
@ -9,7 +9,7 @@ module.exports = {
      log_date_format: "MM-DD HH:mm:ss.SSS Z",
      env: {
        PM2_SERVE_PATH: "./build",
-        PM2_SERVE_PORT: 7123,
+        PM2_SERVE_PORT: 7135,
        PM2_SERVE_SPA: "true",
        PM2_SERVE_HOMEPAGE: "/index.html",
      },
--- a/src/generated/graphql.schema.json
+++ b/src/generated/graphql.schema.json
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,22 +1,17 @@
 {
  "name": "fennec-bs",
-  "version": "0.2.0",
+  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.3.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",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.16",
+    "@date-io/date-fns": "^1.3.13",
    "@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",
@ -24,21 +19,14 @@
    "@types/node": "^12.20.10",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.3",
-    "ace-builds": "^1.4.13",
-    "apollo-link-scalars": "^2.1.3",
-    "configuration": "file:../configuration",
    "date-fns": "^2.21.1",
    "fontsource-roboto": "^4.0.0",
    "formik": "^2.2.6",
    "formik-material-ui": "^3.0.1",
    "formik-material-ui-pickers": "^0.0.12",
    "graphql": "^15.5.0",
-    "graphql-scalars": "^1.10.0",
-    "material-ui-confirm": "^2.1.2",
-    "notistack": "^2.0.2",
    "ramda": "^0.27.1",
    "react": "^17.0.2",
-    "react-ace": "^9.4.4",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "typescript": "^4.2.4",
@ -47,9 +35,10 @@
    "yup": "^0.32.9"
  },
  "scripts": {
-    "start": "BROWSER=none PORT=auto craco start",
-    "build": "craco build",
-    "test": "craco test",
+    "start": "PORT=7123 BROWSER=none react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
    "prestart": "npm run graphql",
    "graphql": "graphql-codegen --config codegen.yml"
  },
@ -77,10 +66,15 @@
    "@graphql-codegen/typescript": "1.21.1",
    "@graphql-codegen/typescript-operations": "1.17.15",
    "@graphql-codegen/typescript-react-apollo": "2.2.3",
-    "@types/date-fns": "^2.6.0",
-    "@types/ramda": "^0.27.41",
+    "@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"
+    "postcss": "^7.0.35",
+    "sass": "^1.32.11",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.2"
  }
 }
--- a/public/index.html
+++ b/public/index.html
@ -24,7 +24,7 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <title>Fennec</title>
+    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/src/App.tsx
+++ b/src/App.tsx
@ -3,12 +3,9 @@ import './App.css';
 import { DefaultLayout } from './layouts';

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

-  const { body: Body } = response;
-  if (!Body) {
-    return <DefaultLayout> Client has some wrong!</DefaultLayout>;
-  }
+const { body: Body } = response;
  return (
    <DefaultLayout>
      <Body response={response} />
--- a/src/commits/commit-list.tsx
+++ b/src/commits/commit-list.tsx
@ -1,274 +0,0 @@
-import { useMutation, useQuery, useSubscription } from "@apollo/client";
-import { Link, useResponse, useRouter } from "@curi/react-dom";
-import { faPlayCircle, faVial } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  Backdrop,
-  CircularProgress,
-  Collapse,
-  IconButton,
-  LinearProgress,
-  List,
-  ListItem,
-  ListItemIcon,
-  ListItemSecondaryAction,
-  ListItemText,
-  useTheme,
-} from "@mui/material";
-import { makeStyles } from "@mui/styles";
-import withStyles from "@mui/styles/withStyles";
-import {
-  Cancel,
-  CheckCircle,
-  CloudDownload,
-  ShoppingCart,
-  Stop,
-  Timer,
-} from "@mui/icons-material";
-import { format } from "date-fns";
-import { useSnackbar } from "notistack";
-import { complement, equals, find, propEq, takeWhile } from "ramda";
-import {
-  FC,
-  Fragment,
-  MouseEventHandler,
-  ReactNode,
-  useCallback,
-  useMemo,
-  useState,
-} from "react";
-import {
-  Commit,
-  CreatePipelineTaskInput,
-  Pipeline,
-  PipelineTask,
-  TaskStatuses,
-  PipelineUnits,
-} from "../generated/graphql";
-import { CREATE_PIPELINE_TASK, STOP_PIPELINE_TASK } from "./mutations";
-import { COMMITS } from "./queries";
-import { SYNC_COMMITS } from "./subscriptions";
-
-interface Props {
-  pipeline: Pipeline;
-}
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    flex: "1 1 100%",
-  },
-  nested: {
-    paddingLeft: theme.spacing(4),
-  },
-}));
-
-export const CommitList: FC<Props> = ({ pipeline }) => {
-  const { enqueueSnackbar } = useSnackbar();
-
-  const { data, loading, refetch } = useQuery<{ commits?: Commit[] }>(COMMITS, {
-    variables: {
-      pipelineId: pipeline.id,
-    },
-  });
-
-  const { loading: syncing } = useSubscription<{ syncCommits: boolean }>(
-    SYNC_COMMITS,
-    {
-      variables: {
-        pipelineId: pipeline.id,
-      },
-      onSubscriptionData({ subscriptionData: { data, error } }) {
-        if (error) {
-          enqueueSnackbar(error.message, {
-            variant: "warning",
-          });
-        }
-        if (data?.syncCommits) {
-          refetch({
-            appInstance: data.syncCommits,
-          });
-        }
-      },
-    }
-  );
-
-  const classes = useStyles();
-
-  return (
-    <section className={classes.root}>
-      {(() => {
-        if (loading) {
-          return <LinearProgress color="secondary" />;
-        }
-
-        return (
-          <section>
-            {syncing && <LinearProgress color="secondary" />}
-            <List>
-              {data?.commits?.map((commit) => (
-                <Item key={commit.hash} commit={commit} pipeline={pipeline} />
-              ))}
-            </List>
-          </section>
-        );
-      })()}
-    </section>
-  );
-};
-
-const unitActionPairs: Array<[PipelineUnits, ReactNode, string]> = [
-  [PipelineUnits.Checkout, <ShoppingCart />, "checkout"],
-  [
-    PipelineUnits.InstallDependencies,
-    <CloudDownload />,
-    "install dependencies",
-  ],
-  [PipelineUnits.Test, <FontAwesomeIcon icon={faVial} />, "test"],
-  [PipelineUnits.Deploy, <FontAwesomeIcon icon={faPlayCircle} />, "deploy"],
-];
-
-const Item: FC<{ commit: Commit; pipeline: Pipeline }> = ({
-  commit,
-  pipeline,
-}) => {
-  const [isOpen, setOpen] = useState(() => false);
-
-  const [createTask, { loading }] = useMutation<
-    { createPipelineTask: PipelineTask },
-    { task: CreatePipelineTaskInput }
-  >(CREATE_PIPELINE_TASK);
-
-  const units = useMemo(
-    () => pipeline.workUnitMetadata.units.map((unit) => unit.type),
-    [pipeline]
-  );
-
-  const { navigate, url } = useRouter();
-  const { response } = useResponse();
-
-  const handleCreateTask = useCallback(
-    (unit: PipelineUnits) => {
-      const _units = [...takeWhile(complement(equals(unit)), units), unit];
-      createTask({
-        variables: {
-          task: {
-            units: _units,
-            pipelineId: pipeline.id,
-            commit: commit.hash,
-          },
-        },
-      }).then(({ data }) => {
-        navigate({
-          url: url({
-            name: "pipeline-task-detail",
-            params: { ...response.params, taskId: data?.createPipelineTask.id },
-          }),
-        });
-      });
-    },
-    [commit, createTask, navigate, pipeline, response, units, url]
-  );
-
-  const actions = useMemo(
-    () =>
-      units.map((unit) => {
-        const pair = find(propEq(0, unit), unitActionPairs);
-        return (
-          pair && (
-            <IconButton
-              key={unit}
-              aria-label={pair[2]}
-              disabled={loading}
-              onClick={() => handleCreateTask(unit)}
-              size="large"
-            >
-              {pair[1]}
-            </IconButton>
-          )
-        );
-      }),
-    [units, handleCreateTask, loading]
-  );
-  return (
-    <Fragment>
-      <ListItem button onClick={() => setOpen(!isOpen)}>
-        <ListItemText
-          primary={commit.message}
-          secondary={commit.date && format(commit.date, "yyyy-MM-dd HH:mm:ss")}
-        />
-        <ListItemSecondaryAction>{actions}</ListItemSecondaryAction>
-      </ListItem>
-      {loading && <LinearProgress color="secondary" />}
-      <Collapse in={isOpen} timeout="auto" unmountOnExit>
-        <List component="div" disablePadding>
-          {commit.tasks.map((task) => (
-            <Link
-              key={task.id}
-              name="pipeline-task-detail"
-              params={{ ...response.params, taskId: task.id }}
-            >
-              <TaskItem task={task} />
-            </Link>
-          ))}
-        </List>
-      </Collapse>
-    </Fragment>
-  );
-};
-
-const TaskItem: FC<{ task: PipelineTask }> = ({ task }) => {
-  const classes = useStyles();
-  const theme = useTheme();
-  const statusIcon: ReactNode = (() => {
-    switch (task.status) {
-      case TaskStatuses.Pending:
-        return <Timer style={{ color: theme.palette.info.main }} />;
-      case TaskStatuses.Success:
-        return <CheckCircle style={{ color: theme.palette.success.main }} />;
-      case TaskStatuses.Failed:
-        return <Cancel style={{ color: theme.palette.error.main }} />;
-      case TaskStatuses.Working:
-        return (
-          <CircularProgress style={{ color: theme.palette.secondary.main }} />
-        );
-    }
-  })();
-  const [stopTask, { loading: stopTaskWaiting }] = useMutation(
-    STOP_PIPELINE_TASK,
-    {
-      variables: { taskId: task.id },
-    }
-  );
-  const stop: MouseEventHandler = useCallback(
-    (event) => {
-      event.stopPropagation();
-      event.preventDefault();
-      stopTask();
-    },
-    [stopTask]
-  );
-  return (
-    <ListItem button className={classes.nested}>
-      <ListItemIcon>{statusIcon}</ListItemIcon>
-      <ListItemText
-        primary={
-          task.startedAt && format(task.startedAt, "yyyy-MM-dd HH:mm:ss")
-        }
-      />
-      <ListItemSecondaryAction>
-        {task.status === TaskStatuses.Working && (
-          <IconButton edge="end" aria-label="stop" onClick={stop} size="large">
-            <Stop />
-          </IconButton>
-        )}
-      </ListItemSecondaryAction>
-      <LimitedBackdrop open={stopTaskWaiting} />
-    </ListItem>
-  );
-};
-const LimitedBackdrop = withStyles({
-  root: {
-    position: "absolute",
-    zIndex: 1,
-  },
-})(Backdrop);
--- a/src/commits/mutations.ts
+++ b/src/commits/mutations.ts
@ -1,17 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const CREATE_PIPELINE_TASK = gql`
-  mutation CreatePipelineTask($task: CreatePipelineTaskInput!) {
-    createPipelineTask(task: $task) {
-      id
-      status
-      startedAt
-      endedAt
-    }
-  }
-`;
-export const STOP_PIPELINE_TASK = gql`
-  mutation StopPipelineTask($taskId: String!) {
-    stopPipelineTask(id: $taskId)
-  }
-`;
--- a/src/commits/queries.ts
+++ b/src/commits/queries.ts
@ -1,20 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const COMMITS = gql`
-  query Commits($pipelineId: String!) {
-    commits(pipelineId: $pipelineId) {
-      message
-      hash
-      date
-      body
-      author_name
-      tasks {
-        id
-        units
-        status
-        startedAt
-        endedAt
-      }
-    }
-  }
-`;
--- a/src/commits/subscriptions.ts
+++ b/src/commits/subscriptions.ts
@ -1,6 +0,0 @@
-import { gql } from "@apollo/client";
-export const SYNC_COMMITS = gql`
-  subscription SyncCommits($pipelineId: String!) {
-    syncCommits(pipelineId: $pipelineId)
-  }
-`;
--- a/src/commons/auth/auth.provider.tsx
+++ b/src/commons/auth/auth.provider.tsx
@ -1,55 +0,0 @@
-import { createContext, useContext, useState } from "react";
-import { FC } from "react";
-import { Login } from "./login";
-
-export interface AuthContext {
-  accessToken: string | null;
-  setAccessToken: (token: string) => void;
-  setRefreshToken: (token: string) => void;
-  refreshToken: string | undefined;
-  login: (dto: any) => void;
-  account?: any;
-  setAccount: (dto: any) => void;
-  logout: () => void;
-}
-const Context = createContext({} as AuthContext);
-
-export const useAuth = () => useContext(Context);
-
-export const AuthProvider: FC = ({ children }) => {
-  const [accessToken, setAccessToken] = useState<string | null>(
-    localStorage.getItem("accessToken")
-  );
-  const [refreshToken, setRefreshToken] = useState<string>();
-  const [account, setAccount] = useState<any>();
-
-  const login = (dto: any) => {
-    setAccessToken(dto.accessToken);
-    setRefreshToken(dto.refreshToken);
-    setAccount(dto.account);
-    localStorage.setItem("accessToken", dto.accessToken);
-  };
-  const logout = () => {
-    setAccessToken(null);
-    setRefreshToken(undefined);
-    setAccount(undefined);
-  };
-
-  return (
-    <Context.Provider
-      value={{
-        accessToken,
-        setAccessToken,
-        refreshToken,
-        setRefreshToken,
-        login,
-        account,
-        setAccount,
-        logout,
-      }}
-    >
-      {children}
-      {accessToken ? null : <Login />}
-    </Context.Provider>
-  );
-};
--- a/src/commons/auth/login.tsx
+++ b/src/commons/auth/login.tsx
@ -1,68 +0,0 @@
-import makeStyles from "@mui/styles/makeStyles";
-import { FC, Fragment, useEffect, useRef } from "react";
-import { useAuth } from "./auth.provider";
-const useStyles = makeStyles((theme) => {
-  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,
-    },
-  };
-});
-
-export const Login: FC = () => {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const { login } = useAuth();
-  useEffect(() => {
-    const iframe = iframeRef.current;
-    if (!iframe) {
-      return;
-    }
-    let messagePort: MessagePort;
-    const onLoad = (ev: MessageEvent) => {
-      if (ev.data !== "init-channel") {
-        return;
-      }
-      messagePort = ev.ports?.[0] as MessagePort;
-      messagePort.onmessage = (ev: MessageEvent) => {
-        if (ev.data?.type === "logged") {
-          login(ev.data.payload);
-        }
-      };
-    };
-    window.addEventListener("message", onLoad);
-
-    return () => {
-      window.removeEventListener("message", onLoad);
-    };
-  }, [login]);
-
-  const classes = useStyles();
-  return (
-    <Fragment>
-      <div className={classes.mask} />
-      <iframe
-        ref={iframeRef}
-        className={classes.iframe}
-        title="Auth"
-        src="https://user.rpi.ivanli.cc/auth/login"
-      ></iframe>
-    </Fragment>
-  );
-};
--- a/src/commons/fallbacks/error-page.tsx
+++ b/src/commons/fallbacks/error-page.tsx
@ -1,11 +0,0 @@
-import { Typography } from '@mui/material';
-import React, { FC } from 'react';
-
-export const ErrorPage: FC = ({children}) => {
-  return (
-    <section>
-      <Typography component="h2">Something is wrong :(</Typography>
-      <Typography variant="body1" component="div">{children}</Typography>
-    </section>
-  );
-}
--- a/src/commons/form/yaml-editor/yaml-editor.tsx
+++ b/src/commons/form/yaml-editor/yaml-editor.tsx
@ -1,28 +0,0 @@
-import { FC } from "@curi/react-universal/node_modules/@types/react";
-import { FieldConfig, useField } from "formik";
-import AceEditor from "react-ace";
-import "ace-builds/src-noconflict/mode-yaml";
-import "ace-builds/src-noconflict/theme-github";
-import { styled } from "@mui/system";
-
-const Editor: FC<FieldConfig<string> & { label?: string; className?: string }> =
-  ({ label, className, ...props }) => {
-    const [field, , helper] = useField(props);
-    return (
-      <AceEditor
-        className={className}
-        style={{ width: "100%" }}
-        {...field}
-        onChange={(value) => helper.setValue(value)}
-        {...props}
-        mode="yaml"
-        theme="github"
-        editorProps={{ $blockScrolling: true }}
-      />
-    );
-  };
-
-export const YamlEditor = Editor;
-styled(Editor)(({ theme }) => ({
-  marginBottom: theme.spacing(2),
-}));
--- a/src/commons/graphql/client.ts
+++ b/src/commons/graphql/client.ts
@ -0,0 +1,6 @@
+import { ApolloClient, InMemoryCache } from "@apollo/client";
+
+export const client = new ApolloClient({
+  uri: "/api/graphql",
+  cache: new InMemoryCache(),
+});
--- a/src/commons/graphql/client.tsx
+++ b/src/commons/graphql/client.tsx
@ -1,184 +0,0 @@
-import {
-  ApolloClient,
-  ApolloLink,
-  HttpLink,
-  InMemoryCache,
-  split,
-  ApolloProvider,
-  fromPromise,
-  FetchResult,
-} from "@apollo/client";
-import { withScalars } from "apollo-link-scalars";
-import { buildClientSchema, IntrospectionQuery } from "graphql";
-import { DateTimeResolver } from "graphql-scalars";
-import { FC } from "react";
-import introspectionResult from "../../generated/graphql.schema.json";
-import { onError } from "@apollo/client/link/error";
-import { WebSocketLink } from "@apollo/client/link/ws";
-import { getMainDefinition, Observable } from "@apollo/client/utilities";
-import { useSnackbar } from "notistack";
-import { deepOmit } from "../../utils/deep-omit";
-import { useMemo } from "react";
-import { EventEmitter } from "events";
-import { useState } from "react";
-import { useAuth } from "../auth/auth.provider";
-import { useEffect } from "react";
-import { useRef } from "react";
-import { setContext } from "@apollo/client/link/context";
-
-const schema = buildClientSchema(
-  introspectionResult as unknown as IntrospectionQuery
-);
-
-const typesMap = {
-  DateTime: DateTimeResolver,
-};
-
-const cleanTypeName = new ApolloLink((operation, forward) => {
-  if (operation.variables) {
-    operation.variables = deepOmit(["__typename"], operation.variables);
-  }
-  const rt = forward(operation);
-  return (
-    rt.map?.((data) => {
-      return data;
-    }) ?? rt
-  );
-});
-
-export const AppApolloClientProvider: FC = ({ children }) => {
-  const { enqueueSnackbar } = useSnackbar();
-  const { accessToken, logout } = useAuth();
-
-  const [loggedEventTarget] = useState(() => new EventEmitter());
-  const accessTokenRef = useRef(accessToken);
-  const logoutRef = useRef(logout);
-
-  useEffect(() => {
-    accessTokenRef.current = accessToken;
-    if (accessToken) {
-      loggedEventTarget.emit("logged", accessToken);
-    }
-  }, [loggedEventTarget, accessToken]);
-  useEffect(() => {
-    logoutRef.current = logout;
-  }, [logout]);
-  const client = useMemo(() => {
-    const authLink = onError(
-      ({ graphQLErrors, networkError, operation, forward }) => {
-        if (graphQLErrors) {
-          for (const error of graphQLErrors) {
-            if (error.extensions?.code === "401") {
-              return fromPromise(
-                new Promise<Observable<FetchResult>>((resolve) => {
-                  loggedEventTarget.once("logged", (accessToken: string) => {
-                    const oldHeaders = operation.getContext().headers;
-                    operation.setContext({
-                      headers: {
-                        ...oldHeaders,
-                        authorization: `Bearer ${accessToken}`,
-                      },
-                    });
-                    const subscriptionClient = (wsLink as any)
-                      .subscriptionClient;
-                    subscriptionClient?.close(false, false);
-                    resolve(forward(operation));
-                  });
-                  logoutRef.current();
-                })
-              ).flatMap((v) => v);
-            }
-          }
-        }
-        const httpResult = (networkError as any)?.result;
-        if (httpResult?.statusCode === 401) {
-          return fromPromise(
-            new Promise<Observable<FetchResult>>((resolve) => {
-              loggedEventTarget.once("logged", (accessToken: string) => {
-                const oldHeaders = operation.getContext().headers;
-                operation.setContext({
-                  headers: {
-                    ...oldHeaders,
-                    authorization: `Bearer ${accessToken}`,
-                  },
-                });
-                resolve(forward(operation));
-              });
-              logoutRef.current();
-            })
-          ).flatMap((v) => v);
-        }
-      }
-    ).concat(
-      setContext(() => ({
-        headers: {
-          authorization: `Bearer ${accessTokenRef.current}`,
-        },
-      }))
-    );
-    const errorLink = onError(({ graphQLErrors, networkError }) => {
-      if (graphQLErrors) {
-        graphQLErrors.forEach((error) => {
-          enqueueSnackbar(error.message, {
-            variant: "error",
-          });
-        });
-        graphQLErrors.forEach(({ message, locations, path }) => {
-          console.error(
-            `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
-          );
-        });
-      }
-      if (networkError) {
-        console.log(`[Network error]: ${networkError}`);
-        enqueueSnackbar(networkError.message, {
-          variant: "error",
-        });
-      }
-    });
-    const wsLink = new WebSocketLink({
-      uri: `${window.location.protocol.replace("http", "ws")}//${
-        window.location.hostname
-      }:${window.location.port}/api/graphql`,
-      options: {
-        reconnect: true,
-        connectionParams: () => ({
-          authorization: `Bearer ${accessTokenRef.current} `,
-        }),
-      },
-    });
-    const httpLink = new HttpLink({
-      uri: "/api/graphql",
-    });
-    const splitLink = split(
-      ({ query }) => {
-        const definition = getMainDefinition(query);
-        return (
-          definition.kind === "OperationDefinition" &&
-          definition.operation === "subscription"
-        );
-      },
-      wsLink,
-      httpLink
-    );
-    const link = ApolloLink.from([
-      errorLink,
-      authLink,
-      withScalars({ schema, typesMap }) as unknown as ApolloLink,
-      cleanTypeName,
-      splitLink,
-    ]);
-    const client = new ApolloClient({
-      connectToDevTools: true,
-      ssrMode: typeof window === "undefined",
-      link,
-      cache: new InMemoryCache({
-        typePolicies: {},
-      }),
-    });
-
-    return client;
-  }, [enqueueSnackbar, loggedEventTarget]);
-
-  return <ApolloProvider client={client}>{children}</ApolloProvider>;
-};
--- a/src/commons/graphql/queries.ts
+++ b/src/commons/graphql/queries.ts
@ -1,26 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const COMMIT_LIST_QUERY = gql`
-  query CommitListQuery($projectId: String!, $pipelineId: String!) {
-    project(id: $projectId) {
-      id
-      name
-      comment
-      webUrl
-      sshUrl
-      webHookSecret
-    }
-    pipeline(id: $pipelineId) {
-      id
-      name
-      branch
-      workUnitMetadata {
-        version
-        units {
-          type
-          scripts
-        }
-      }
-    }
-  }
-`;
--- a/src/commons/route/active-link.tsx
+++ b/src/commons/route/active-link.tsx
@ -1,20 +0,0 @@
-import { ActiveHookProps, Link, LinkProps, useActive } from '@curi/react-dom';
-import React, { FC, ReactNode } from 'react';
-
-export type ActiveLinkProps = ActiveHookProps &
-  LinkProps & {
-    className?: string;
-    children: ReactNode;
-  };
-
-export const ActiveLink:FC<ActiveLinkProps> = ({ name, params, partial, className = "", ...rest }) => {
-  const active = useActive({ name, params, partial });
-  return (
-    <Link
-      name={name}
-      params={params}
-      {...rest}
-      className={active ? `${className} active` : className}
-    />
-  );
-};
--- a/src/commons/route/router.tsx
+++ b/src/commons/route/router.tsx
@ -1,31 +0,0 @@
-import { useApolloClient } from "@apollo/client";
-import { createRouterComponent } from "@curi/react-dom";
-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";
-
-const Component: FC = ({ children }) => {
-  const client = useApolloClient();
-  const [body, setBody] = useState<any>(null);
-
-  useEffect(() => {
-    const router = createRouter(browser, routes, {
-      sideEffects: [
-        announce(({ response }) => {
-          return `Navigated to ${response.location.pathname}`;
-        }),
-      ],
-      external: { client },
-    });
-    const Router = createRouterComponent(router);
-    router.once(() => {
-      setBody(<Router>{children}</Router>);
-    });
-  }, [setBody, client, children]);
-
-  return body ?? <LinearProgress />;
-};
-
-export default Component;
--- a/src/generated/graphql.tsx
+++ b/src/generated/graphql.tsx
@ -14,35 +14,6 @@ export type Scalars = {
  DateTime: any;
 };

-export type Commit = {
-  __typename?: 'Commit';
-  hash: Scalars['String'];
-  date: Scalars['DateTime'];
-  message: Scalars['String'];
-  refs: Scalars['String'];
-  body: Scalars['String'];
-  author_name: Scalars['String'];
-  author_email: Scalars['String'];
-  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'];
@ -82,17 +53,22 @@ export type LogFields = {
  tasks: Array<PipelineTask>;
 };

+export type LogList = {
+  __typename?: 'LogList';
+  all: Array<LogFields>;
+  total: Scalars['Float'];
+  latest: LogFields;
+};
+
 export type Mutation = {
  __typename?: 'Mutation';
  createProject: Project;
  updateProject: Project;
  removeProject: Scalars['Float'];
  createPipeline: Pipeline;
-  updatePipeline: Pipeline;
+  modifyPipeline: Pipeline;
  deletePipeline: Scalars['Float'];
  createPipelineTask: PipelineTask;
-  stopPipelineTask: Scalars['Boolean'];
-  setConfiguration: Configuration;
 };


@ -116,8 +92,9 @@ export type MutationCreatePipelineArgs = {
 };


-export type MutationUpdatePipelineArgs = {
-  pipeline: UpdatePipelineInput;
+export type MutationModifyPipelineArgs = {
+  Pipeline: UpdatePipelineInput;
+  id: Scalars['String'];
 };


@ -130,16 +107,6 @@ export type MutationCreatePipelineTaskArgs = {
  task: CreatePipelineTaskInput;
 };

-
-export type MutationStopPipelineTaskArgs = {
-  id: Scalars['String'];
-};
-
-
-export type MutationSetConfigurationArgs = {
-  setConfigurationInput: SetConfigurationInput;
-};
-
 export type Pipeline = {
  __typename?: 'Pipeline';
  id: Scalars['ID'];
@ -148,7 +115,6 @@ export type Pipeline = {
  branch: Scalars['String'];
  name: Scalars['String'];
  workUnitMetadata: WorkUnitMetadata;
-  environment: Scalars['String'];
 };

 export type PipelineTask = {
@ -162,19 +128,14 @@ export type PipelineTask = {
  status: TaskStatuses;
  startedAt?: Maybe<Scalars['DateTime']>;
  endedAt?: Maybe<Scalars['DateTime']>;
-  runOn: Scalars['String'];
 };

-export type PipelineTaskEvent = {
-  __typename?: 'PipelineTaskEvent';
-  taskId: Scalars['String'];
-  pipelineId: Scalars['String'];
-  projectId: Scalars['String'];
+export type PipelineTaskLogMessage = {
+  __typename?: 'PipelineTaskLogMessage';
  unit?: Maybe<PipelineUnits>;
-  emittedAt: Scalars['DateTime'];
+  time: Scalars['DateTime'];
  message: Scalars['String'];
-  messageType: Scalars['String'];
-  status: TaskStatuses;
+  isError: Scalars['Boolean'];
 };

 export type PipelineTaskLogs = {
@ -210,12 +171,10 @@ export type Query = {
  hello: Hello;
  projects: Array<Project>;
  project: Project;
-  pipelines: Array<Pipeline>;
-  pipeline: Pipeline;
-  commits?: Maybe<Array<Commit>>;
+  listPipelines: Array<Pipeline>;
+  findPipeline: Pipeline;
  listPipelineTaskByPipelineId: Array<PipelineTask>;
-  pipelineTask: PipelineTask;
-  getConfiguration?: Maybe<Configuration>;
+  findPipelineTask: PipelineTask;
 };


@ -224,61 +183,39 @@ export type QueryProjectArgs = {
 };


-export type QueryPipelinesArgs = {
+export type QueryListPipelinesArgs = {
  projectId?: Maybe<Scalars['String']>;
 };


-export type QueryPipelineArgs = {
+export type QueryFindPipelineArgs = {
  id: Scalars['String'];
 };


-export type QueryCommitsArgs = {
-  pipelineId: Scalars['String'];
-};
-
-
 export type QueryListPipelineTaskByPipelineIdArgs = {
  pipelineId: Scalars['String'];
 };


-export type QueryPipelineTaskArgs = {
+export type QueryFindPipelineTaskArgs = {
  id: Scalars['String'];
 };

-
-export type QueryGetConfigurationArgs = {
-  pipelineId?: Maybe<Scalars['String']>;
-  projectId?: Maybe<Scalars['String']>;
-  id?: Maybe<Scalars['String']>;
-};
-
-export type SetConfigurationInput = {
-  id?: Maybe<Scalars['String']>;
-  pipelineId: Scalars['String'];
-  projectId: Scalars['String'];
-  content: Scalars['String'];
-  language: ConfigurationLanguage;
-  name?: Maybe<Scalars['String']>;
-};
-
 export type Subscription = {
  __typename?: 'Subscription';
-  syncCommits?: Maybe<Scalars['String']>;
-  pipelineTaskEvent: PipelineTaskEvent;
+  listLogsForPipeline: LogList;
+  pipelineTaskLog: PipelineTaskLogMessage;
  pipelineTaskChanged: PipelineTask;
 };


-export type SubscriptionSyncCommitsArgs = {
-  appInstance?: Maybe<Scalars['String']>;
-  pipelineId: Scalars['String'];
+export type SubscriptionListLogsForPipelineArgs = {
+  id: Scalars['String'];
 };


-export type SubscriptionPipelineTaskEventArgs = {
+export type SubscriptionPipelineTaskLogArgs = {
  taskId: Scalars['String'];
 };

@ -296,10 +233,10 @@ export enum TaskStatuses {
 }

 export type UpdatePipelineInput = {
+  projectId: Scalars['String'];
  branch: Scalars['String'];
  name: Scalars['String'];
  workUnitMetadata: WorkUnitMetadataInput;
-  id: Scalars['String'];
 };

 export type UpdateProjectInput = {
@ -324,11 +261,11 @@ export type WorkUnitInput = {

 export type WorkUnitMetadata = {
  __typename?: 'WorkUnitMetadata';
-  version: Scalars['Int'];
+  version: Scalars['Float'];
  units: Array<WorkUnit>;
 };

 export type WorkUnitMetadataInput = {
-  version?: Maybe<Scalars['Int']>;
+  version?: Maybe<Scalars['Float']>;
  units: Array<WorkUnitInput>;
 };
--- a/src/index.tsx
+++ b/src/index.tsx
@ -4,46 +4,40 @@ import "./index.css";
 import "fontsource-roboto";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
-import { AppApolloClientProvider } from "./commons/graphql/client";
-import { ConfirmProvider } from "material-ui-confirm";
-import { SnackbarProvider } from "notistack";
-import Router from "./commons/route/router";
-import { AuthProvider } from "./commons/auth/auth.provider";
-import { zhCN } from "@mui/material/locale";
-import {
-  ThemeProvider,
-  Theme,
-  StyledEngineProvider,
-  createTheme,
-} from "@mui/material/styles";
+import { client } from "./commons/graphql/client";
+import { ApolloProvider } from "@apollo/client";
+import { MuiPickersUtilsProvider } from "@material-ui/pickers";
+import DateFnsUtils from "@date-io/date-fns";
+import zhLocale from "date-fns/locale/zh-CN";
+import { createRouterComponent } from "@curi/react-dom";
+import { createRouter, announce } from "@curi/router";
+import { browser } from "@hickory/browser";
+import routes from "./routes";

-declare module "@mui/styles/defaultTheme" {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  interface DefaultTheme extends Theme {}
-}
+const router = createRouter(browser, routes, {
+  sideEffects: [
+    announce(({ response }) => {
+      return `Navigated to ${response.location.pathname}`;
+    }),
+  ],
+  external: { client }
+});
+const Router = createRouterComponent(router);

-const theme = createTheme({}, zhCN);
-
-ReactDOM.render(
-  <React.StrictMode>
-    <ConfirmProvider>
-      <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={theme}>
-          <SnackbarProvider maxSnack={5}>
-            <AuthProvider>
-              <AppApolloClientProvider>
-                <Router>
-                  <App />
-                </Router>
-              </AppApolloClientProvider>
-            </AuthProvider>
-          </SnackbarProvider>
-        </ThemeProvider>
-      </StyledEngineProvider>
-    </ConfirmProvider>
-  </React.StrictMode>,
-  document.getElementById("root")
-);
+router.once(() => {
+  ReactDOM.render(
+    <React.StrictMode>
+      <ApolloProvider client={client}>
+        <MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
+          <Router>
+            <App />
+          </Router>
+        </MuiPickersUtilsProvider>
+      </ApolloProvider>
+    </React.StrictMode>,
+    document.getElementById("root")
+  );
+});

 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
--- a/src/layouts/default.tsx
+++ b/src/layouts/default.tsx
@ -1,26 +1,28 @@
-import React, { FC, useCallback, useState } from "react";
+import React, { FC } 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 { ProjectPanel } from "../projects/project-panel";
-import { HeaderContainerProvider } from "./header-container";
+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 Typography from "@material-ui/core/Typography";
+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';
 const drawerWidth = 240;

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      display: "flex",
-      overflow: "hidden",
    },
    appBar: {
      zIndex: theme.zIndex.drawer + 1,
@ -68,24 +70,17 @@ 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,
-      height: "100vh",
-      display: "flex",
-      flexFlow: "column",
-      padding: theme.spacing(0),
+      padding: theme.spacing(3),
    },
  })
 );

-export const DefaultLayout: FC = ({ children }) => {
+export const DefaultLayout: FC = ({children}) => {
  const classes = useStyles();
  const theme = useTheme();
  const [open, setOpen] = React.useState(true);
@ -98,71 +93,62 @@ 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 />
-      <AppBar
-        position="fixed"
-        className={clsx(classes.appBar, {
-          [classes.appBarShift]: open,
-        })}
-      >
-        <Toolbar>
-          <IconButton
-            color="inherit"
-            aria-label="open drawer"
-            onClick={handleDrawerOpen}
-            edge="start"
-            className={clsx(classes.menuButton, {
-              [classes.hide]: open,
-            })}
-            size="large">
-            <MenuIcon />
-          </IconButton>
-          <div className={classes.headerContaner} ref={onRefChange}></div>
-        </Toolbar>
-      </AppBar>
-      <Drawer
-        variant="permanent"
-        className={clsx(classes.drawer, {
-          [classes.drawerOpen]: open,
-          [classes.drawerClose]: !open,
-        })}
-        classes={{
-          paper: clsx({
+        <CssBaseline />
+        <AppBar
+          position="fixed"
+          className={clsx(classes.appBar, {
+            [classes.appBarShift]: open,
+          })}
+        >
+          <Toolbar>
+            <IconButton
+              color="inherit"
+              aria-label="open drawer"
+              onClick={handleDrawerOpen}
+              edge="start"
+              className={clsx(classes.menuButton, {
+                [classes.hide]: open,
+              })}
+            >
+              <MenuIcon />
+            </IconButton>
+            <Typography variant="h6" noWrap>
+              Mini variant drawer
+            </Typography>
+          </Toolbar>
+        </AppBar>
+        <Drawer
+          variant="permanent"
+          className={clsx(classes.drawer, {
            [classes.drawerOpen]: open,
            [classes.drawerClose]: !open,
-          }),
-        }}
-      >
-        <div className={classes.toolbar}>
-          <IconButton onClick={handleDrawerClose} size="large">
-            {theme.direction === "rtl" ? (
-              <ChevronRightIcon />
-            ) : (
-              <ChevronLeftIcon />
-            )}
-          </IconButton>
-        </div>
-        <Divider />
-        <ProjectPanel />
-        <Divider />
-      </Drawer>
-      <main className={classes.content}>
-        <div className={classes.toolbar} />
-
-        <HeaderContainerProvider value={headerContainer}>
-          {children}
-        </HeaderContainerProvider>
-      </main>
+          })}
+          classes={{
+            paper: clsx({
+              [classes.drawerOpen]: open,
+              [classes.drawerClose]: !open,
+            }),
+          }}
+        >
+          <div className={classes.toolbar}>
+            <IconButton onClick={handleDrawerClose}>
+              {theme.direction === "rtl" ? (
+                <ChevronRightIcon />
+              ) : (
+                <ChevronLeftIcon />
+              )}
+            </IconButton>
+          </div>
+          <Divider />
+          <ProjectPanel />
+          <Divider />
+        </Drawer>
+        <main className={classes.content}>
+          <div className={classes.toolbar} />
+          { children }
+        </main>
    </div>
  );
-};
+}
--- a/src/layouts/header-container.tsx
+++ b/src/layouts/header-container.tsx
@ -1,7 +0,0 @@
-import { createContext, useContext } from 'react';
-
-const Context = createContext<HTMLElement| undefined>(undefined);
-
-export const HeaderContainerProvider = Context.Provider;
-
-export const useHeaderContainer = () => useContext(Context);
--- a/src/layouts/index.tsx
+++ b/src/layouts/index.tsx
@ -1,2 +1 @@
 export * from './default';
-export * from './header-container';
--- a/src/pipeline-tasks/pipeline-task-detail.tsx
+++ b/src/pipeline-tasks/pipeline-task-detail.tsx
@ -1,188 +0,0 @@
-import { gql, useQuery, useSubscription } from "@apollo/client";
-import { LinearProgress, Typography } from "@mui/material";
-import makeStyles from '@mui/styles/makeStyles';
-import { format } from "date-fns";
-import { FC, useState } from "react";
-import { ErrorPage } from "../commons/fallbacks/error-page";
-import {
-  PipelineTask,
-  PipelineTaskEvent,
-  PipelineTaskLogs,
-  TaskStatuses,
-} from "../generated/graphql";
-import { PIPELINE_TASK_EVENT } from "./subscriptions";
-import { clone, find, propEq } from "ramda";
-
-interface Props {
-  taskId: string;
-}
-
-const PIPELINE_TASK = gql`
-  query FindPipelineTask($taskId: String!) {
-    pipelineTask(id: $taskId) {
-      id
-      units
-      commit
-      status
-      startedAt
-      endedAt
-      logs {
-        unit
-        logs
-        status
-        startedAt
-        endedAt
-      }
-    }
-  }
-`;
-
-const useStyles = makeStyles((theme) => ({
-  root: {},
-  groupTitle: {
-    backgroundColor: "white",
-    fontWeight: 500,
-    borderTop: "1px solid #eee",
-    fontSize: "16px",
-    padding: "12px",
-    marginLeft: "1px",
-  },
-  logText: {
-    fontFamily: 'Menlo, Monaco, "Courier New", monospace',
-    whiteSpace: "pre-wrap",
-    border: "none",
-    margin: "6px 12px",
-    display: "block",
-  },
-}));
-
-export const PipelineTaskDetail: FC<Props> = ({ taskId }) => {
-  const [, setTaskEvents] = useState(() => new Array<PipelineTaskEvent>());
-  const { data, loading, error, client } = useQuery<{
-    pipelineTask: PipelineTask;
-  }>(PIPELINE_TASK, {
-    variables: { taskId },
-  });
-  const task = data?.pipelineTask;
-  useSubscription<{ pipelineTaskEvent: PipelineTaskEvent }>(
-    PIPELINE_TASK_EVENT,
-    {
-      variables: { taskId },
-      onSubscriptionData({ subscriptionData: { data } }) {
-        const event = data?.pipelineTaskEvent;
-        console.log(event);
-        if (event && task) {
-          setTaskEvents((prev) => [...prev, event]);
-          if (event.unit) {
-            // event of running scripts
-            client.cache.modify({
-              id: client.cache.identify(task!),
-              fields: {
-                logs(before: PipelineTaskLogs[]) {
-                  before = clone(before);
-                  let l = find(propEq("unit", event.unit), before);
-                  if (l) {
-                    l.logs += event.message;
-                  } else {
-                    l = {
-                      unit: event.unit!,
-                      logs: event.message,
-                      status: event.status,
-                      startedAt: event.emittedAt,
-                      endedAt: null,
-                      __typename: "PipelineTaskLogs",
-                    };
-                    before.push(l);
-                  }
-                  if (event.status === TaskStatuses.Working) {
-                    l.startedAt || (l.startedAt = event.emittedAt);
-                  }
-                  if (
-                    [TaskStatuses.Failed, TaskStatuses.Success].includes(
-                      event.status
-                    )
-                  ) {
-                    l.startedAt && (l.startedAt = event.emittedAt);
-                    l.endedAt = event.emittedAt;
-                  }
-                  l.status = event.status;
-                  return before;
-                },
-              },
-            });
-          } else {
-            // event of task status change
-            client.cache.modify({
-              id: client.cache.identify(task!),
-              fields: {
-                status() {
-                  return event.status;
-                },
-                startedAt(before) {
-                  if (event.status === TaskStatuses.Working) {
-                    return event.emittedAt;
-                  } else {
-                    return before;
-                  }
-                },
-                endedAt(before) {
-                  if (
-                    [TaskStatuses.Success, TaskStatuses.Failed].includes(
-                      event.status
-                    )
-                  ) {
-                    return event.emittedAt;
-                  } else {
-                    return before;
-                  }
-                },
-              },
-            });
-          }
-        }
-      },
-    }
-  );
-  const classes = useStyles();
-
-  if (error) {
-    return <ErrorPage>{error.message}</ErrorPage>;
-  }
-
-  if (loading) {
-    return <LinearProgress color="secondary" />;
-  }
-
-  return (
-    <div className={classes.root}>
-      <Typography variant="h4" component="h2">
-        {taskId} detail
-      </Typography>
-      <Typography variant="h5" component="h3">
-        {task?.status}
-      </Typography>
-      <Typography variant="h5" component="h3">
-        {task?.startedAt && format(task?.startedAt, "yyyy-MM-dd HH:mm:ss.SSS")}-
-        {task?.endedAt && format(task?.endedAt, "yyyy-MM-dd HH:mm:ss.SSS")}
-      </Typography>
-
-      {task?.logs.map((logs) => (
-        <LogGroup key={logs.unit} logs={logs} />
-      ))}
-    </div>
-  );
-};
-
-const LogGroup: FC<{ logs: PipelineTaskLogs }> = ({ logs }) => {
-  const classes = useStyles();
-  return (
-    <div>
-      <div className={classes.groupTitle}>
-        {logs.unit}{" "}
-        {logs.startedAt && format(logs.startedAt, "yyyy-MM-dd HH:mm:ss")}{" "}
-        {logs.endedAt && format(logs.endedAt, "yyyy-MM-dd HH:mm:ss")} {logs.status}
-      </div>
-      <code className={classes.logText}>{logs.logs}</code>
-    </div>
-  );
-};
--- a/src/pipeline-tasks/subscriptions.ts
+++ b/src/pipeline-tasks/subscriptions.ts
@ -1,16 +0,0 @@
-import { gql } from "@apollo/client";
-
-export const PIPELINE_TASK_EVENT = gql`
-  subscription PipelineTaskEvent($taskId: String!) {
-    pipelineTaskEvent(taskId: $taskId) {
-      taskId
-      pipelineId
-      projectId
-      unit
-      emittedAt
-      message
-      messageType
-      status
-    }
-  }
-`;
--- a/src/pipelines/index.ts
+++ b/src/pipelines/index.ts
@ -1,4 +0,0 @@
-export * from './pipeline-detail';
-export * from './pipeline-list';
-export * from './queries';
-export * from "./runtime-config-editor";
--- a/src/pipelines/mutations.ts
+++ b/src/pipelines/mutations.ts
@ -1,54 +0,0 @@
-import { gql } from "@apollo/client";
-
-export const CREATE_PIPELINE = gql`
-  mutation CreatePipeline($pipeline: CreatePipelineInput!) {
-    createPipeline(pipeline: $pipeline) {
-      id
-      projectId
-      branch
-      name
-      environment
-      workUnitMetadata {
-        version
-        units {
-          type
-          scripts
-        }
-      }
-    }
-  }
-`;
-
-export const UPDATE_PIPELINE = gql`
-  mutation UpdatePipeline($pipeline: UpdatePipelineInput!) {
-    updatePipeline(pipeline: $pipeline) {
-      id
-      projectId
-      branch
-      name
-      environment
-      workUnitMetadata {
-        version
-        units {
-          type
-          scripts
-        }
-      }
-    }
-  }
-`;
-
-export const DELETE_PIPELINE = gql`
-  mutation DeletePipeline($id: String!) {
-    deletePipeline(id: $id)
-  }
-`;
-
-
-export const SET_CONFIGURATION = gql`
-  mutation SetConfiguration($configuration: SetConfigurationInput!) {
-    setConfiguration(setConfigurationInput: $configuration) {
-      id
-    }
-  }
-`;
--- a/src/pipelines/pipeline-detail.tsx
+++ b/src/pipelines/pipeline-detail.tsx
@ -1,11 +0,0 @@
-import { FC } from 'react';
-import { Pipeline } from '../generated/graphql';
-
-interface Props {
-  pipeline: Pipeline;
-}
-
-export const PipelineDetail: FC<Props> = ({pipeline}) => {
-
-  return <div>PipelineDetail</div>
-}
--- a/src/pipelines/pipeline-editor.tsx
+++ b/src/pipelines/pipeline-editor.tsx
@ -1,289 +0,0 @@
-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 { FormikHelpers, Formik, Form, Field } from "formik";
-import { TextField, TextFieldProps } from "formik-material-ui";
-import { useConfirm } from "material-ui-confirm";
-import { useSnackbar } from "notistack";
-import { not, omit } from "ramda";
-import { ChangeEvent, FC } from "react";
-import { Pipeline, PipelineUnits } from "../generated/graphql";
-import { useHeaderContainer } from "../layouts";
-import { CREATE_PIPELINE, DELETE_PIPELINE, UPDATE_PIPELINE } from "./mutations";
-import * as Yup from "yup";
-
-type Values = Partial<Pipeline>;
-
-interface Props {
-  pipeline: Values;
-}
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    flex: "1 1 100%",
-  },
-  nested: {
-    paddingLeft: theme.spacing(4),
-  },
-  form: {
-    margin: 16,
-  },
-  metadataList: {
-    padding: 0,
-  },
-  metadataItem: {
-    listStyle: "none",
-  },
-  metadataContainer: {
-    padding: "10px 30px",
-    margin: "10px 0",
-  },
-}));
-
-export const PipelineEditor: FC<Props> = ({ pipeline }) => {
-  const { enqueueSnackbar } = useSnackbar();
-
-  const isCreate = not("id" in pipeline);
-
-  const [createPipeline] = useMutation<{ createPipeline: Pipeline }>(
-    CREATE_PIPELINE,
-    {
-      update(cache, { data }) {
-        cache.modify({
-          fields: {
-            pipelines(exiting = []) {
-              const pipelineRef = cache.writeFragment({
-                data: data!.createPipeline,
-                fragment: gql`
-                  fragment newPipeline on Pipeline {
-                    id
-                    projectId
-                    branch
-                    environment
-                    name
-                    workUnitMetadata {
-                      version
-                      units {
-                        type
-                        scripts
-                      }
-                    }
-                  }
-                `,
-              });
-              return [pipelineRef, ...exiting];
-            },
-          },
-        });
-      },
-    }
-  );
-  const [updatePipeline] = useMutation(UPDATE_PIPELINE);
-
-  const router = useRouter();
-
-  const submitForm = async (
-    values: Values,
-    formikHelpers: FormikHelpers<Values>
-  ) => {
-    try {
-      let pipelineId = pipeline.id;
-      let projectId = pipeline.projectId;
-      if (isCreate) {
-        await createPipeline({
-          variables: {
-            pipeline: values,
-          },
-        }).then(({ data }) => {
-          pipelineId = data!.createPipeline.id;
-          projectId = data!.createPipeline.projectId;
-        });
-      } else {
-        await updatePipeline({
-          variables: {
-            pipeline: omit(["projectId"], values),
-          },
-        });
-      }
-      enqueueSnackbar("Saved successfully", {
-        variant: "success",
-      });
-      router.navigate({
-        url: router.url({
-          name: "pipeline-commits",
-          params: {
-            pipelineId,
-            projectId,
-          },
-        }),
-        method: "replace",
-      });
-    } finally {
-      formikHelpers.setSubmitting(false);
-    }
-  };
-
-  const [deletePipeline, { loading: deleting }] = useMutation(DELETE_PIPELINE, {
-    variables: { id: pipeline.id },
-    update(cache) {
-      cache.modify({
-        fields: {
-          projects(exiting: Reference[] = [], { readField }) {
-            return exiting.filter(
-              (ref) => pipeline.id !== readField("id", ref)
-            );
-          },
-        },
-      });
-    },
-  });
-
-  const confirm = useConfirm();
-  const handleDelete = async () => {
-    try {
-      await confirm({ description: `This will delete ${pipeline.name}.` });
-      await deletePipeline();
-      enqueueSnackbar("Deleted successfully", {
-        variant: "success",
-      });
-      router.navigate({
-        url: router.url({
-          name: "dashboard",
-        }),
-      });
-    } catch {}
-  };
-
-  const headerContainer = useHeaderContainer();
-
-  const units = [
-    PipelineUnits.Checkout,
-    PipelineUnits.InstallDependencies,
-    PipelineUnits.Test,
-    PipelineUnits.Deploy,
-    PipelineUnits.CleanUp,
-  ];
-  const classes = useStyles();
-  return (
-    <Paper className={classes.root}>
-      <Portal container={headerContainer}>
-        <Grid container justifyContent="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"
-            >
-              <Delete />
-            </IconButton>
-          )}
-        </Grid>
-      </Portal>
-      <Formik
-        initialValues={pipeline}
-        validationSchema={Yup.object({
-          name: Yup.string()
-            .max(32, "Must be 32 characters or less")
-            .required("Required"),
-          branch: Yup.string()
-            .max(64, "Must be 64 characters or less")
-            .required("Required"),
-          environment: Yup.string()
-            .max(64, "Must be 64 characters or less")
-            .required("Required"),
-        })}
-        onSubmit={submitForm}
-      >
-        {({ submitForm, isSubmitting, values }) => {
-          return (
-            <Form className={classes.form}>
-              <Field component={TextField} name="name" label="Name" fullWidth />
-              <Field
-                component={TextField}
-                name="branch"
-                label="Branch"
-                fullWidth
-                margin="normal"
-              />
-              <Field
-                component={TextField}
-                name="environment"
-                label="Environment"
-                fullWidth
-                margin="normal"
-              />
-              <Paper className={classes.metadataContainer}>
-                <Field
-                  component={TextField}
-                  name="workUnitMetadata.version"
-                  label="Version"
-                  fullWidth
-                  readonly
-                  margin="normal"
-                />
-                <ol className={classes.metadataList}>
-                  {units.map((unit, index) => {
-                    return (
-                      <li key={unit} className={classes.metadataItem}>
-                        <Field
-                          name={`workUnitMetadata.units[${index}].scripts]`}
-                          component={ScriptsField}
-                          label={`${unit} Scripts`}
-                          fullWidth
-                          multiline
-                          margin="normal"
-                        />
-                      </li>
-                    );
-                  })}
-                </ol>
-              </Paper>
-              {isSubmitting && <LinearProgress />}
-              <Button
-                variant="contained"
-                color="primary"
-                disabled={isSubmitting}
-                onClick={submitForm}
-                fullWidth
-              >
-                Submit
-              </Button>
-            </Form>
-          );
-        }}
-      </Formik>
-    </Paper>
-  );
-};
-
-const ScriptsField: FC<TextFieldProps> = ({ field, form, meta, ...props }) => {
-  return (
-    <TextField
-      {...props}
-      form={form}
-      meta={meta}
-      field={{
-        ...field,
-        onBlur: (ev: React.FocusEvent) => {
-          form.setFieldValue(
-            field.name,
-            field.value.filter((it: string) => !!it)
-          );
-          return field.onBlur(ev);
-        },
-        value: field.value?.join("\n") ?? "",
-        onChange: (ev: ChangeEvent<HTMLInputElement>) =>
-          form.setFieldValue(
-            field.name,
-            ev.target.value?.split("\n").map((it) => it) ?? []
-          ),
-      }}
-    />
-  );
-};
--- a/src/pipelines/pipeline-list.tsx
+++ b/src/pipelines/pipeline-list.tsx
@ -1,192 +0,0 @@
-import { gql, useQuery } from "@apollo/client";
-import { Link, useRouter } from "@curi/react-dom";
-import {
-  List,
-  ListItem,
-  Typography,
-  ListItemText,
-  Menu,
-  MenuItem,
-  PopoverPosition,
-} from "@mui/material";
-import { FC, useMemo, useState, MouseEvent } from "react";
-import { Pipeline, Project } from "../generated/graphql";
-import { CallMerge } from "@mui/icons-material";
-import { Divider } from "@material-ui/core";
-import { Box } from "@mui/system";
-import {
-  faCodeBranch,
-  faMapMarkerAlt,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-interface Props {
-  projectId: string;
-}
-
-const PIPELINES = gql`
-  query Pipelines($projectId: String!) {
-    pipelines(projectId: $projectId) {
-      id
-      name
-      branch
-      environment
-    }
-    project(id: $projectId) {
-      id
-    }
-  }
-`;
-
-export const PipelineList: FC<Props> = ({ projectId }) => {
-  const { data } = useQuery<
-    { pipelines: Pipeline[]; project: Project },
-    { projectId: string }
-  >(PIPELINES, {
-    variables: { projectId },
-  });
-  const pipelines = useMemo(() => {
-    return data?.pipelines?.map((pipeline) => ({
-      ...pipeline,
-      project: data?.project,
-    }));
-  }, [data]);
-
-  const [contextMenu, setContextMenu] = useState<[PopoverPosition, Pipeline]>();
-  const { navigate, url } = useRouter();
-
-  const handleContextMenu = (event: MouseEvent, pipeline: Pipeline | false) => {
-    event.preventDefault();
-    if (pipeline) {
-      setContextMenu([
-        { top: event.clientY - 4, left: event.clientX - 2 },
-        pipeline,
-      ]);
-    } else {
-      setContextMenu(undefined);
-    }
-  };
-
-  const handleClose = () => {
-    setContextMenu(undefined);
-  };
-
-  const modify = () => {
-    navigate({
-      url: url({
-        name: "edit-pipeline",
-        params: {
-          pipelineId: contextMenu![1].id,
-          projectId: contextMenu![1].project.id,
-        },
-      }),
-    });
-  };
-  const modifyRuntimeConfiguration = () => {
-    navigate({
-      url: url({
-        name: "edit-runtime-configuration",
-        params: {
-          pipelineId: contextMenu![1].id,
-          projectId: contextMenu![1].project.id,
-        },
-      }),
-    });
-  };
-
-  return (
-    <>
-      <List>
-        {pipelines?.map((pipeline) => (
-          <Link
-            name="pipeline-commits"
-            params={{ pipelineId: pipeline.id, projectId: projectId }}
-            key={pipeline.id}
-            onContextMenu={(ev) => handleContextMenu(ev, pipeline)}
-          >
-            <Item pipeline={pipeline} />
-          </Link>
-        ))}
-      </List>
-      <Menu
-        keepMounted
-        open={!!contextMenu}
-        onClose={handleClose}
-        onContextMenu={(ev) => handleContextMenu(ev, false)}
-        anchorReference="anchorPosition"
-        anchorPosition={contextMenu?.[0]}
-      >
-        <MenuItem
-          onClick={() => {
-            modifyRuntimeConfiguration();
-            handleClose();
-          }}
-        >
-          Runtime Config
-        </MenuItem>
-        <MenuItem
-          onClick={() => {
-            modify();
-            handleClose();
-          }}
-        >
-          Pipeline Config
-        </MenuItem>
-        <Divider />
-        <MenuItem sx={{ color: "error.main" }} onClick={handleClose}>
-          Delete
-        </MenuItem>
-      </Menu>
-    </>
-  );
-};
-
-const Item = ({ pipeline }: { pipeline: Pipeline }) => {
-  return (
-    <ListItem button>
-      <ListItemText
-        primary={pipeline.name}
-        secondary={
-          <Box sx={{ display: "flex", flexFlow: "column" }}>
-            <Box
-              sx={{
-                display: "flex",
-                alignItems: "center",
-              }}
-            >
-              <FontAwesomeIcon
-                style={{ width: "1em", marginRight: "0.5em" }}
-                icon={faCodeBranch}
-              />
-              <Typography
-                component="span"
-                variant="body2"
-                color="textSecondary"
-              >
-                {pipeline.branch}
-              </Typography>
-            </Box>
-            <Box
-              sx={{
-                display: "flex",
-                alignItems: "center",
-              }}
-            >
-              <FontAwesomeIcon
-                style={{ width: "1em", marginRight: "0.5em" }}
-                icon={faMapMarkerAlt}
-              />
-              <Typography
-                component="span"
-                variant="body2"
-                color="textSecondary"
-              >
-                {pipeline.environment}
-              </Typography>
-            </Box>
-          </Box>
-        }
-      />
-    </ListItem>
-  );
-};
--- a/src/pipelines/queries.ts
+++ b/src/pipelines/queries.ts
@ -1,36 +0,0 @@
-import { gql } from "@apollo/client";
-
-export const PIPELINE = gql`
-  query Pipeline($id: String!) {
-    pipeline(id: $id) {
-      id
-      name
-      projectId
-      branch
-      environment
-      workUnitMetadata {
-        version
-        units {
-          type
-          scripts
-        }
-      }
-    }
-  }
-`;
-
-export const CONFIGURATION = gql`
-  query QueryGetConfigurationArgs($pipelineId: String!, $projectId: String!) {
-    configuration: getConfiguration(
-      pipelineId: $pipelineId
-      projectId: $projectId
-    ) {
-      id
-      content
-      language
-      pipelineId
-      projectId
-      name
-    }
-  }
-`;
--- a/src/pipelines/runtime-config-editor.tsx
+++ b/src/pipelines/runtime-config-editor.tsx
@ -1,49 +0,0 @@
-import { useMutation } from "@apollo/client";
-import { useRouter } from "@curi/react-universal";
-import { Button, Paper } from "@mui/material";
-import { Form, Formik } from "formik";
-import { FC, useCallback } from "react";
-import { YamlEditor } from "../commons/form/yaml-editor/yaml-editor";
-import { Configuration } from "../generated/graphql";
-import { SET_CONFIGURATION } from "./mutations";
-
-type Values = Configuration;
-
-interface Props {
-  configuration: Configuration;
-}
-export const RuntimeConfigEditor: FC<Props> = ({ configuration }) => {
-  const { history } = useRouter();
-  const [setConfiguration] =
-    useMutation<{ configuration: Configuration }>(SET_CONFIGURATION);
-  const submitForm = useCallback(
-    async (values: Values) => {
-      await setConfiguration({ variables: { configuration: values } });
-      history.go(-1);
-    },
-    [setConfiguration, history]
-  );
-  return (
-    <Paper sx={{ p: 2 }}>
-      <Formik<Values> initialValues={configuration ?? {}} onSubmit={submitForm}>
-        {({ submitForm, isSubmitting, values }) => {
-          return (
-            <Form>
-              <YamlEditor label="YAML" name="content" />
-              <Button
-                variant="contained"
-                color="primary"
-                type="submit"
-                disabled={isSubmitting}
-                onClick={submitForm}
-                fullWidth
-              >
-                Submit
-              </Button>
-            </Form>
-          );
-        }}
-      </Formik>
-    </Paper>
-  );
-};
--- a/src/projects/index.ts
+++ b/src/projects/index.ts
@ -1,4 +0,0 @@
-export * from './project-detail';
-export * from './project-panel';
-export * from './project-editor';
-export * from './queries';
--- a/src/projects/project-detail.tsx
+++ b/src/projects/project-detail.tsx
@ -1,94 +0,0 @@
-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 { useHeaderContainer } from "../layouts";
-import { PipelineList } from "../pipelines/pipeline-list";
-import { Edit } from '@mui/icons-material';
-import { Link } from '@curi/react-dom';
-import { Button } from "@mui/material";
-import { AddBox } from "@mui/icons-material";
-
-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, children }) => {
-  const headerContainer = useHeaderContainer();
-
-  const classes = useStyles();
-
-  return (
-    <Fragment>
-      <Portal container={headerContainer}>
-        <Grid
-          container
-          spacing={3}
-          direction="row"
-          justifyContent="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" size="large">{<Edit />}</IconButton>
-            </Link>
-          </Grid>
-        </Grid>
-      </Portal>
-      <Grid
-        container
-        spacing={0}
-        direction="row"
-        alignItems="stretch"
-        className={classes.root}
-      >
-        <Grid item xs={3} lg={2} style={{ height: "100%", display: "flex" }}>
-          <Paper className={classes.pipelineListContainer}>
-            <Box m={2}>
-              <Link name="create-pipeline" params={{ projectId: project.id }}>
-                <Button
-                  variant="contained"
-                  color="primary"
-                  title="New Pipeline"
-                  startIcon={<AddBox />}
-                >
-                  New Pipeline
-                </Button>
-              </Link>
-            </Box>
-            <PipelineList projectId={project.id} />
-          </Paper>
-        </Grid>
-        <Grid
-          item
-          xs={9}
-          lg={10}
-          style={{ height: "100%", display: "flex", overflowY: "auto" }}
-        >
-          {children}
-        </Grid>
-      </Grid>
-    </Fragment>
-  );
-};
--- a/src/projects/project-editor.tsx
+++ b/src/projects/project-editor.tsx
@ -1,17 +1,16 @@
-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 { gql, useMutation } from "@apollo/client";
+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 { FC } from "react";
-import { Project } from "../generated/graphql";
+import React, { FC } from "react";
+import {
+  CreateProjectInput,
+  UpdateProjectInput,
+  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 { useConfirm } from "material-ui-confirm";
-import { useSnackbar } from "notistack";

 type Values = Partial<Project>;

@ -54,12 +53,6 @@ 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);

@ -69,7 +62,7 @@ export const ProjectEditor: FC<Props> = ({ project }) => {
      update(cache, { data }) {
        cache.modify({
          fields: {
-            projects(exitingProjects = []) {
+            findProjects(exitingProjects = []) {
              const newProjectRef = cache.writeFragment({
                data: data!.createProject,
                fragment: gql`
@ -93,9 +86,6 @@ 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>
@ -116,9 +106,6 @@ export const ProjectEditor: FC<Props> = ({ project }) => {
          },
        });
      }
-      enqueueSnackbar("Saved successfully", {
-        variant: "success",
-      });
      router.navigate({
        url: router.url({
          name: "project-detail",
@ -133,54 +120,9 @@ 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 justifyContent="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">
-              <DeleteIcon />
-            </IconButton>
-          )}
-        </Grid>
-      </Portal>
      <Formik
        initialValues={project}
        validationSchema={Yup.object({
--- a/src/projects/project-panel.tsx
+++ b/src/projects/project-panel.tsx
@ -1,13 +1,13 @@
-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 { 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 { ActiveLink } from "../commons/route/active-link";
+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';
+import { ListItemText } from '@material-ui/core';
+import { Button } from '@material-ui/core';
+import { AddBox } from '@material-ui/icons';

 const PROJECTS = gql`
  query Projects {
@ -22,31 +22,19 @@ const PROJECTS = gql`
  }
 `;

-const useStyles = makeStyles((theme: Theme) => ({
-  item: {
-    position: "relative",
-    ".active &": {
-      backgroundColor: theme.palette.background.default,
-    },
-    ".active &::before": {
-      position: "absolute",
-      top: 0,
-      bottom: 0,
-      left: 0,
-      content: '""',
-      display: "block",
-      borderLeftColor: theme.palette.secondary.main,
-      borderLeftWidth: 4,
-      borderLeftStyle: "solid",
-    },
-  },
-}));
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    
+  })
+);

 export function ProjectPanel() {
  return (
    <section>
      <Box m={2}>
-        <Link name="create-project">
+        <Link
+          name="create-project"
+        >
          <Button
            variant="contained"
            color="primary"
@ -63,23 +51,32 @@ export function ProjectPanel() {
 }

 const ProjectList: FC<{}> = () => {
-  const { data } = useQuery<{
+  const { data, refetch } = useQuery<{
    projects: Project[];
  }>(PROJECTS);
  const projects = data?.projects;
+  const [currentProject, setCurrentProject] = useState<Project | undefined>(
+    undefined
+  );
+  const { current } = useRouter();

-  const classes = useStyles();
+  useEffect(() => {
+    const currId = current()?.response?.params.projectId;
+    console.log(currId);
+    setCurrentProject(find(propEq("id", currId), projects ?? []));
+  }, [current, projects]);

  const items = projects?.map((item) => (
-    <ActiveLink
-      name="project-detail"
+    <Link
+      name="edit-project"
      params={{ projectId: item.id }}
      key={item.id}
+      onNav={() => setCurrentProject(item)}
    >
-      <ListItem button className={classes.item}>
+      <ListItem button>
        <ListItemText primary={item.name} secondary={item.comment} />
      </ListItem>
-    </ActiveLink>
+    </Link>
  ));
  return <List>{items}</List>;
 };
--- a/src/routes.tsx
+++ b/src/routes.tsx
@ -1,21 +1,9 @@
 import { ApolloClient, InMemoryCache } from "@apollo/client";
 import { prepareRoutes } from "@curi/router";
-import { omit } from "ramda";
-import { ProjectDetail, ProjectEditor, PROJECT } from "./projects";
-import { COMMIT_LIST_QUERY } from "./commons/graphql/queries";
-import { CommitList } from "./commits/commit-list";
-import { PipelineTaskDetail } from "./pipeline-tasks/pipeline-task-detail";
-import { PipelineEditor } from "./pipelines/pipeline-editor";
-import {
-  Configuration,
-  ConfigurationLanguage,
-  CreatePipelineInput,
-  CreateProjectInput,
-  Pipeline,
-  PipelineUnits,
-  Project,
-} from "./generated/graphql";
-import { CONFIGURATION, PIPELINE, RuntimeConfigEditor } from "./pipelines";
+import { omit } from 'ramda';
+import { CreateProjectInput, Project } from './generated/graphql';
+import { ProjectEditor } from './projects/project-editor';
+import { PROJECT } from './projects/queries';

 export default prepareRoutes([
  {
@ -24,7 +12,7 @@ export default prepareRoutes([
    respond() {
      return { body: () => <div>DashBoard</div> };
    },
-  }, // dashboard
+  },
  {
    name: "create-project",
    path: "projects/create",
@ -38,14 +26,11 @@ export default prepareRoutes([
      };
      return { body: () => <ProjectEditor project={input} /> };
    },
-  }, // create-project
+  },
  {
    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 },
@ -59,170 +44,18 @@ export default prepareRoutes([
    respond({ resolved }) {
      return resolved;
    },
-  }, // edit-project
-  {
-    name: "create-pipeline",
-    path: "projects/:projectId/pipelines/create",
-    async resolve(
-      matched,
-      { client }: { client: ApolloClient<InMemoryCache> }
-    ) {
-      const units = [
-        PipelineUnits.Checkout,
-        PipelineUnits.InstallDependencies,
-        PipelineUnits.Test,
-        PipelineUnits.Deploy,
-        PipelineUnits.CleanUp,
-      ];
-      const input: CreatePipelineInput = {
-        name: "",
-        branch: "",
-        projectId: matched!.params.projectId,
-        workUnitMetadata: {
-          version: 1,
-          units: units.map((util) => ({ type: util, scripts: [] })),
-        },
-      };
-      return {
-        body: () => <PipelineEditor pipeline={input as any} />,
-      };
-    },
-    respond({ resolved }) {
-      return resolved;
-    },
-  }, // create-pipeline
-  {
-    name: "edit-pipeline",
-    path: "projects/:projectId/pipelines/:pipelineId/edit",
-    async resolve(
-      matched,
-      { client }: { client: ApolloClient<InMemoryCache> }
-    ) {
-      const { data } = await client.query<{ pipeline: Pipeline }>({
-        query: PIPELINE,
-        variables: { id: matched?.params.pipelineId },
-      });
-      return {
-        body: () => <PipelineEditor pipeline={data.pipeline} />,
-      };
-    },
-    respond({ resolved }) {
-      return resolved;
-    },
-  }, // edit-pipeline
-  {
-    name: "edit-runtime-configuration",
-    path: "projects/:projectId/pipelines/:pipelineId/runtime-configuration",
-    async resolve(
-      matched,
-      { client }: { client: ApolloClient<InMemoryCache> }
-    ) {
-      const { data } = await client.query<{ configuration: Configuration }>({
-        query: CONFIGURATION,
-        variables: {
-          pipelineId: matched?.params.pipelineId,
-          projectId: matched?.params.projectId,
-        },
-      });
-      return {
-        body: () => (
-          <RuntimeConfigEditor
-            configuration={
-              data.configuration ?? {
-                name: "Default Configuration",
-                pipelineId: matched?.params.pipelineId,
-                projectId: matched?.params.projectId,
-                language: ConfigurationLanguage.Yaml,
-                content: null,
-              }
-            }
-          />
-        ),
-      };
-    },
-    respond({ resolved }) {
-      return resolved;
-    },
-  }, // edit-pipeline
+  },
  {
    name: "project-detail",
    path: "projects/:projectId",
-    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)} />
-        ),
-      };
+    resolve() {
+      const body = import(
+        /* webpackChunkName: "article-editor" */ "./projects/project-panel"
+      ).then((m) => m.ProjectPanel);
+      return body;
    },
    respond({ resolved }) {
-      return resolved;
+      return { body: resolved };
    },
-    children: [
-      {
-        name: "pipeline-commits",
-        path: "pipelines/:pipelineId/commits",
-        async resolve(
-          matched,
-          { client }: { client: ApolloClient<InMemoryCache> }
-        ) {
-          const { data } = await client.query<{
-            pipeline: Pipeline;
-            project: Project;
-          }>({
-            query: COMMIT_LIST_QUERY,
-            variables: {
-              projectId: matched?.params.projectId,
-              pipelineId: matched?.params.pipelineId,
-            },
-          });
-          return {
-            body: () => (
-              <ProjectDetail project={omit(["__typename"], data.project)}>
-                <CommitList pipeline={omit(["__typename"], data.pipeline)} />
-              </ProjectDetail>
-            ),
-          };
-        },
-        respond({ resolved, error }) {
-          return resolved || <div>Failed</div>;
-        },
-      }, // pipeline-commits
-      {
-        name: "pipeline-task-detail",
-        path: "pipelines/:pipelineId/tasks/:taskId",
-        async resolve(
-          matched,
-          { client }: { client: ApolloClient<InMemoryCache> }
-        ) {
-          const { data } = await client.query<{
-            pipeline: Pipeline;
-            project: Project;
-          }>({
-            query: COMMIT_LIST_QUERY,
-            variables: {
-              projectId: matched?.params.projectId,
-              pipelineId: matched?.params.pipelineId,
-            },
-          });
-          return {
-            body: () => (
-              <ProjectDetail project={omit(["__typename"], data.project)}>
-                <PipelineTaskDetail taskId={matched?.params.taskId} />
-              </ProjectDetail>
-            ),
-          };
-        },
-        respond({ resolved, error }) {
-          return resolved || <div>Failed</div>;
-        },
-      }, // pipeline-task-detail
-    ],
-  }, // project-detail
+  },
 ]);
--- a/src/utils/deep-omit.ts
+++ b/src/utils/deep-omit.ts
@ -1,22 +0,0 @@
-import { fromPairs, map, omit, pipe, toPairs, type } from "ramda";
-
-export const deepOmit = <T = any, K = any>(
-  names: readonly string[],
-  value: K
-): T => {
-  switch (type(value)) {
-    case "Array":
-      return (value as unknown as Array<any>).map((item: any) =>
-        deepOmit(names, item)
-      ) as unknown as T;
-    case "Object":
-      return pipe(
-        omit(names),
-        toPairs,
-        map(([key, val]) => [key, deepOmit(names, val)] as any),
-        fromPairs
-      )(value) as unknown as T;
-    default:
-      return value as unknown as T;
-  }
-};
Author	SHA1	Message	Date
Ivan Li	f810aedfaa	feat(projects): list, create and update.	2021-05-04 21:08:00 +08:00
Ivan Li	7d04d53d02	build: use pm2 serve for prod.	2021-05-03 12:03:18 +08:00
Ivan Li	e21e6fc3e2	build(dep): remove @types/date-fns.	2021-05-03 10:35:30 +08:00
Ivan Li	9334a45e55	build: pm2 ecosystem config.	2021-05-03 10:21:42 +08:00
Ivan Li	d29eeaae90	build: fix vscode launch.json.	2021-05-02 22:14:16 +08:00
Ivan Li	4a533748f3	build: 复原 graphql 配置，修改开发 port.	2021-05-01 17:45:31 +08:00
Ivan Li	183564aed8	feat: Article 模块	2021-05-01 15:13:38 +08:00
Ivan	0b5fa5b643	feat: route-react -> curi.	2021-04-28 13:41:09 +08:00
Ivan Li	2e70c31849	backup	2021-04-24 14:47:22 +08:00
Ivan Li	065e1679ba	feat: INIT PROJECT.	2021-04-18 11:18:29 +08:00