feat: 添加 pipeline 的部署环境配置与展示。

.cracorc.js

@@ -0,0 +1,21 @@
+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;
+  },
+};

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vscode/chrome

.vscode/launch.json

@@ -8,10 +8,9 @@
       "name": "chrome",
       "type": "chrome",
       "request": "launch",
-      "reAttach": true,
-      "url": "http://fennec.localhost/",
+      "url": "http://fennec.localhost:7070/",
       "webRoot": "${workspaceFolder}",
-      "userDataDir": "/Users/ivan/Projects/.chrome"
+      "userDataDir": ".vscode/chrome"
     }
   ]
 }

.vscode/settings.json

@@ -1,8 +1,9 @@
 {
   "cSpell.words": [
-    "Formik",
     "clsx",
     "fontsource",
+    "Formik",
+    "noconflict",
     "notistack",
     "unmount",
     "vditor"

apollo.config.js

@@ -1,8 +1,8 @@
 module.exports = {
   client: {
     service: {
-      name: 'fennec-be',
-      url: 'http://api.fennec.localhost/graphql'
-    }
-  }
+      name: "fennec-be",
+      url: "http://localhost:7122/graphql",
+    },
+  },
 };

codegen.yml

@@ -1,5 +1,5 @@
 overwrite: true
-schema: "http://api.fennec.localhost/graphql"
+schema: "http://localhost:7122/graphql"
 # documents: "src/**/*.graphql"
 generates:
   src/generated/graphql.tsx:

ecosystem.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   apps: [
     {
-      name: "fennec-bs",
+      name: "fennec-fe",
       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: 7135,
+        PM2_SERVE_PORT: 7123,
         PM2_SERVE_SPA: "true",
         PM2_SERVE_HOMEPAGE: "/index.html",
       },

package.json

@@ -1,20 +1,22 @@
 {
   "name": "fennec-bs",
-  "version": "0.1.1",
+  "version": "0.2.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",
-    "@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",
+    "@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",
     "@hickory/browser": "^2.1.0",
-    "@material-ui/core": "^4.11.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "*",
-    "@material-ui/pickers": "^3.3.10",
+    "@mui/icons-material": "^5.0.1",
+    "@mui/lab": "^5.0.0-alpha.49",
+    "@mui/material": "^5.0.2",
+    "@mui/styles": "^5.0.1",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
@@ -22,18 +24,21 @@
     "@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.9.3",
+    "graphql-scalars": "^1.10.0",
     "material-ui-confirm": "^2.1.2",
-    "notistack": "^1.0.6",
+    "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",
@@ -42,10 +47,9 @@
     "yup": "^0.32.9"
   },
   "scripts": {
-    "start": "PORT=7123 BROWSER=none react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "start": "BROWSER=none PORT=auto craco start",
+    "build": "craco build",
+    "test": "craco test",
     "prestart": "npm run graphql",
     "graphql": "graphql-codegen --config codegen.yml"
   },

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>React App</title>
+    <title>Fennec</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

src/App.tsx

@@ -6,6 +6,9 @@ function App() {
   const { response } = useResponse();
 
   const { body: Body } = response;
+  if (!Body) {
+    return <DefaultLayout> Client has some wrong!</DefaultLayout>;
+  }
   return (
     <DefaultLayout>
       <Body response={response} />

src/commits/commit-list.tsx

@@ -13,10 +13,10 @@ import {
   ListItemIcon,
   ListItemSecondaryAction,
   ListItemText,
-  makeStyles,
   useTheme,
-  withStyles,
-} from "@material-ui/core";
+} from "@mui/material";
+import { makeStyles } from "@mui/styles";
+import withStyles from "@mui/styles/withStyles";
 import {
   Cancel,
   CheckCircle,
@@ -24,7 +24,7 @@ import {
   ShoppingCart,
   Stop,
   Timer,
-} from "@material-ui/icons";
+} from "@mui/icons-material";
 import { format } from "date-fns";
 import { useSnackbar } from "notistack";
 import { complement, equals, find, propEq, takeWhile } from "ramda";
@@ -133,8 +133,7 @@ const Item: FC<{ commit: Commit; pipeline: Pipeline }> = ({
 }) => {
   const [isOpen, setOpen] = useState(() => false);
 
-  const [createTask, { loading }] =
-    useMutation<
+  const [createTask, { loading }] = useMutation<
     { createPipelineTask: PipelineTask },
     { task: CreatePipelineTaskInput }
   >(CREATE_PIPELINE_TASK);
@@ -181,6 +180,7 @@ 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}>
+          <IconButton edge="end" aria-label="stop" onClick={stop} size="large">
             <Stop />
           </IconButton>
         )}

src/commons/auth/auth.provider.tsx

@@ -0,0 +1,55 @@
+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>
+  );
+};

src/commons/auth/login.tsx

@@ -0,0 +1,68 @@
+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>
+  );
+};

src/commons/fallbacks/error-page.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 import React, { FC } from 'react';
 
 export const ErrorPage: FC = ({children}) => {

src/commons/form/yaml-editor/yaml-editor.tsx

@@ -0,0 +1,28 @@
+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),
+}));

src/commons/graphql/client.tsx

@@ -5,6 +5,8 @@ import {
   InMemoryCache,
   split,
   ApolloProvider,
+  fromPromise,
+  FetchResult,
 } from "@apollo/client";
 import { withScalars } from "apollo-link-scalars";
 import { buildClientSchema, IntrospectionQuery } from "graphql";
@@ -13,9 +15,16 @@ 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 } from "@apollo/client/utilities";
+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
@@ -37,8 +46,76 @@ const cleanTypeName = new ApolloLink((operation, forward) => {
   );
 });
 
-export const FennecApolloClientProvider: FC = ({ children }) => {
+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) => {
@@ -65,6 +142,9 @@ export const FennecApolloClientProvider: FC = ({ children }) => {
       }:${window.location.port}/api/graphql`,
       options: {
         reconnect: true,
+        connectionParams: () => ({
+          authorization: `Bearer ${accessTokenRef.current} `,
+        }),
       },
     });
     const httpLink = new HttpLink({
@@ -83,6 +163,7 @@ export const FennecApolloClientProvider: FC = ({ children }) => {
     );
     const link = ApolloLink.from([
       errorLink,
+      authLink,
       withScalars({ schema, typesMap }) as unknown as ApolloLink,
       cleanTypeName,
       splitLink,
@@ -92,22 +173,12 @@ export const FennecApolloClientProvider: FC = ({ children }) => {
       ssrMode: typeof window === "undefined",
       link,
       cache: new InMemoryCache({
-      typePolicies: {
-        // PipelineTaskLogs: {
-        //   keyFields: ["unit"],
-        // },
-        // PipelineTask: {
-        //   fields: {
-        //     logs: {
-        //       merge(existing = [], incoming: any[]) {
-        //         return [...existing, ...incoming];
-        //       },
-        //     },
-        //   },
-        // },
-      },
+        typePolicies: {},
       }),
     });
 
+    return client;
+  }, [enqueueSnackbar, loggedEventTarget]);
+
   return <ApolloProvider client={client}>{children}</ApolloProvider>;
 };

src/commons/route/router.tsx

@@ -2,9 +2,9 @@ import { useApolloClient } from "@apollo/client";
 import { createRouterComponent } from "@curi/react-dom";
 import { createRouter, announce } from "@curi/router";
 import { browser } from "@hickory/browser";
-import { FC, ReactNode, useEffect, useMemo, useState } from "react";
+import { FC, useEffect, useState } from "react";
 import routes from "../../routes";
-import { LinearProgress } from "@material-ui/core";
+import { LinearProgress } from "@mui/material";
 
 const Component: FC = ({ children }) => {
   const client = useApolloClient();

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,
@@ -971,6 +1176,22 @@
             },
             "isDeprecated": false,
             "deprecationReason": null
+          },
+          {
+            "name": "environment",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
           }
         ],
         "inputFields": null,
@@ -978,16 +1199,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 +1994,55 @@
             },
             "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": "OBJECT",
+              "name": "Configuration",
+              "ofType": null
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
           }
         ],
         "inputFields": null,
@@ -1790,6 +2050,105 @@
         "enumValues": null,
         "possibleTypes": null
       },
+      {
+        "kind": "INPUT_OBJECT",
+        "name": "SetConfigurationInput",
+        "description": null,
+        "fields": null,
+        "inputFields": [
+          {
+            "name": "id",
+            "description": null,
+            "type": {
+              "kind": "SCALAR",
+              "name": "String",
+              "ofType": null
+            },
+            "defaultValue": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "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
+          },
+          {
+            "name": "name",
+            "description": null,
+            "type": {
+              "kind": "SCALAR",
+              "name": "String",
+              "ofType": null
+            },
+            "defaultValue": "\"Default Configuration\"",
+            "isDeprecated": false,
+            "deprecationReason": null
+          }
+        ],
+        "interfaces": null,
+        "enumValues": null,
+        "possibleTypes": null
+      },
       {
         "kind": "OBJECT",
         "name": "Subscription",
@@ -1949,22 +2308,6 @@
         "description": null,
         "fields": null,
         "inputFields": [
-          {
-            "name": "projectId",
-            "description": null,
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "String",
-                "ofType": null
-              }
-            },
-            "defaultValue": null,
-            "isDeprecated": false,
-            "deprecationReason": null
-          },
           {
             "name": "branch",
             "description": null,

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'];
@@ -125,6 +148,7 @@ export type Pipeline = {
   branch: Scalars['String'];
   name: Scalars['String'];
   workUnitMetadata: WorkUnitMetadata;
+  environment: Scalars['String'];
 };
 
 export type PipelineTask = {
@@ -191,6 +215,7 @@ export type Query = {
   commits?: Maybe<Array<Commit>>;
   listPipelineTaskByPipelineId: Array<PipelineTask>;
   pipelineTask: PipelineTask;
+  getConfiguration?: Maybe<Configuration>;
 };
 
 
@@ -223,6 +248,22 @@ export type QueryPipelineTaskArgs = {
   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']>;
@@ -255,7 +296,6 @@ export enum TaskStatuses {
 }
 
 export type UpdatePipelineInput = {
-  projectId: Scalars['String'];
   branch: Scalars['String'];
   name: Scalars['String'];
   workUnitMetadata: WorkUnitMetadataInput;

src/index.tsx

@@ -4,26 +4,42 @@ import "./index.css";
 import "fontsource-roboto";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
-import { FennecApolloClientProvider } 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 { AppApolloClientProvider } from "./commons/graphql/client";
 import { ConfirmProvider } from "material-ui-confirm";
 import { SnackbarProvider } from "notistack";
-import Router from './commons/route/router';
+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";
+
+declare module "@mui/styles/defaultTheme" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface DefaultTheme extends Theme {}
+}
+
+const theme = createTheme({}, zhCN);
 
 ReactDOM.render(
   <React.StrictMode>
     <ConfirmProvider>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}>
           <SnackbarProvider maxSnack={5}>
-          <FennecApolloClientProvider>
-            <MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
+            <AuthProvider>
+              <AppApolloClientProvider>
                 <Router>
                   <App />
                 </Router>
-            </MuiPickersUtilsProvider>
-          </FennecApolloClientProvider>
+              </AppApolloClientProvider>
+            </AuthProvider>
           </SnackbarProvider>
+        </ThemeProvider>
+      </StyledEngineProvider>
     </ConfirmProvider>
   </React.StrictMode>,
   document.getElementById("root")

src/layouts/default.tsx

@@ -1,21 +1,17 @@
-import React, { FC, useCallback, useRef, useState } from "react";
+import React, { FC, useCallback, useState } from "react";
 import clsx from "clsx";
-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 { 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";
 const drawerWidth = 240;
@@ -128,7 +124,7 @@ export const DefaultLayout: FC = ({ children }) => {
             className={clsx(classes.menuButton, {
               [classes.hide]: open,
             })}
-          >
+            size="large">
             <MenuIcon />
           </IconButton>
           <div className={classes.headerContaner} ref={onRefChange}></div>
@@ -148,7 +144,7 @@ export const DefaultLayout: FC = ({ children }) => {
         }}
       >
         <div className={classes.toolbar}>
-          <IconButton onClick={handleDrawerClose}>
+          <IconButton onClick={handleDrawerClose} size="large">
             {theme.direction === "rtl" ? (
               <ChevronRightIcon />
             ) : (

src/pipeline-tasks/pipeline-task-detail.tsx

@@ -1,5 +1,6 @@
 import { gql, useQuery, useSubscription } from "@apollo/client";
-import { LinearProgress, makeStyles, Typography } from "@material-ui/core";
+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";
@@ -56,9 +57,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export const PipelineTaskDetail: FC<Props> = ({ taskId }) => {
-  const [taskEvents, setTaskEvents] = useState(
-    () => new Array<PipelineTaskEvent>()
-  );
+  const [, setTaskEvents] = useState(() => new Array<PipelineTaskEvent>());
   const { data, loading, error, client } = useQuery<{
     pipelineTask: PipelineTask;
   }>(PIPELINE_TASK, {

src/pipelines/index.ts

@@ -1,3 +1,4 @@
 export * from './pipeline-detail';
 export * from './pipeline-list';
 export * from './queries';
+export * from "./runtime-config-editor";

src/pipelines/mutations.ts

@@ -7,6 +7,7 @@ export const CREATE_PIPELINE = gql`
       projectId
       branch
       name
+      environment
       workUnitMetadata {
         version
         units {
@@ -25,6 +26,7 @@ export const UPDATE_PIPELINE = gql`
       projectId
       branch
       name
+      environment
       workUnitMetadata {
         version
         units {
@@ -41,3 +43,12 @@ export const DELETE_PIPELINE = gql`
     deletePipeline(id: $id)
   }
 `;
+
+
+export const SET_CONFIGURATION = gql`
+  mutation SetConfiguration($configuration: SetConfigurationInput!) {
+    setConfiguration(setConfigurationInput: $configuration) {
+      id
+    }
+  }
+`;

src/pipelines/pipeline-editor.tsx

@@ -1,33 +1,18 @@
-import { gql, Reference, useMutation, useQuery } from "@apollo/client";
+import { gql, Reference, useMutation } from "@apollo/client";
 import { useRouter } from "@curi/react-dom";
-import {
-  Button,
-  Grid,
-  IconButton,
-  LinearProgress,
-  makeStyles,
-  Paper,
-  Portal,
-  Typography,
-} from "@material-ui/core";
-import { Delete } from "@material-ui/icons";
+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 { TextField as MuiTextField } from "@material-ui/core";
 import { useConfirm } from "material-ui-confirm";
 import { useSnackbar } from "notistack";
 import { not, omit } from "ramda";
 import { ChangeEvent, FC } from "react";
-import {
-  Pipeline,
-  WorkUnitMetadata,
-  PipelineUnits,
-} from "../generated/graphql";
+import { Pipeline, PipelineUnits } from "../generated/graphql";
 import { useHeaderContainer } from "../layouts";
 import { CREATE_PIPELINE, DELETE_PIPELINE, UPDATE_PIPELINE } from "./mutations";
-import { PIPELINE } from "./queries";
 import * as Yup from "yup";
-import { useField } from "formik";
 
 type Values = Partial<Pipeline>;
 
@@ -76,6 +61,7 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
                     id
                     projectId
                     branch
+                    environment
                     name
                     workUnitMetadata {
                       version
@@ -108,7 +94,7 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
       if (isCreate) {
         await createPipeline({
           variables: {
-            input: values,
+            pipeline: values,
           },
         }).then(({ data }) => {
           pipelineId = data!.createPipeline.id;
@@ -183,7 +169,7 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
   return (
     <Paper className={classes.root}>
       <Portal container={headerContainer}>
-        <Grid container justify="space-between" alignItems="center">
+        <Grid container justifyContent="space-between" alignItems="center">
           <Typography variant="h6" component="h1">
             {isCreate ? "Create" : "Edit"} Pipeline
           </Typography>
@@ -192,6 +178,7 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
               color="inherit"
               onClick={handleDelete}
               disabled={deleting}
+              size="large"
             >
               <Delete />
             </IconButton>
@@ -205,7 +192,10 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
             .max(32, "Must be 32 characters or less")
             .required("Required"),
           branch: Yup.string()
-            .max(32, "Must be 32 characters or less")
+            .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}
@@ -221,6 +211,13 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
                 fullWidth
                 margin="normal"
               />
+              <Field
+                component={TextField}
+                name="environment"
+                label="Environment"
+                fullWidth
+                margin="normal"
+              />
               <Paper className={classes.metadataContainer}>
                 <Field
                   component={TextField}
@@ -273,11 +270,18 @@ const ScriptsField: FC<TextFieldProps> = ({ field, form, meta, ...props }) => {
       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.trim()) ?? []
+            ev.target.value?.split("\n").map((it) => it) ?? []
           ),
       }}
     />

src/pipelines/pipeline-list.tsx

@@ -5,14 +5,20 @@ import {
   ListItem,
   Typography,
   ListItemText,
-  ListItemSecondaryAction,
-  IconButton,
-} from "@material-ui/core";
-import { FC, MouseEventHandler, useMemo } from "react";
+  Menu,
+  MenuItem,
+  PopoverPosition,
+} from "@mui/material";
+import { FC, useMemo, useState, MouseEvent } from "react";
 import { Pipeline, Project } from "../generated/graphql";
-import { CallMerge, Edit } from "@material-ui/icons";
-import { clone } from "ramda";
-import { useEffect } from "react";
+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;
@@ -24,6 +30,7 @@ const PIPELINES = gql`
       id
       name
       branch
+      environment
     }
     project(id: $projectId) {
       id
@@ -32,7 +39,7 @@ const PIPELINES = gql`
 `;
 
 export const PipelineList: FC<Props> = ({ projectId }) => {
-  const { data, loading } = useQuery<
+  const { data } = useQuery<
     { pipelines: Pipeline[]; project: Project },
     { projectId: string }
   >(PIPELINES, {
@@ -44,48 +51,142 @@ export const PipelineList: FC<Props> = ({ projectId }) => {
       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 }) => {
-  const { navigate, url } = useRouter();
-  const modify: MouseEventHandler = (ev) => {
-    ev.preventDefault();
-    navigate({
-      url: url({
-        name: "edit-pipeline",
-        params: { pipelineId: pipeline.id, projectId: pipeline.project.id },
-      }),
-    });
-  };
   return (
     <ListItem button>
       <ListItemText
         primary={pipeline.name}
         secondary={
-          <Typography component="span" variant="body2" color="textSecondary">
-            <CallMerge fontSize="small" />
+          <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>
         }
       />
-      <ListItemSecondaryAction>
-        <IconButton edge="end" aria-label="edit" onClick={modify}>
-          <Edit />
-        </IconButton>
-      </ListItemSecondaryAction>
     </ListItem>
   );
 };

src/pipelines/queries.ts

@@ -1,4 +1,4 @@
-import { gql } from '@apollo/client';
+import { gql } from "@apollo/client";
 
 export const PIPELINE = gql`
   query Pipeline($id: String!) {
@@ -7,6 +7,7 @@ export const PIPELINE = gql`
       name
       projectId
       branch
+      environment
       workUnitMetadata {
         version
         units {
@@ -17,3 +18,19 @@ export const PIPELINE = gql`
     }
   }
 `;
+
+export const CONFIGURATION = gql`
+  query QueryGetConfigurationArgs($pipelineId: String!, $projectId: String!) {
+    configuration: getConfiguration(
+      pipelineId: $pipelineId
+      projectId: $projectId
+    ) {
+      id
+      content
+      language
+      pipelineId
+      projectId
+      name
+    }
+  }
+`;

src/pipelines/runtime-config-editor.tsx

@@ -0,0 +1,49 @@
+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>
+  );
+};

src/projects/project-detail.tsx

@@ -1,10 +1,13 @@
 import { Project } from "../generated/graphql";
 import React, { FC, Fragment } from "react";
-import { IconButton, Grid, makeStyles, Paper, Portal, Typography } from "@material-ui/core";
+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 '@material-ui/icons';
+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;
@@ -35,7 +38,7 @@ export const ProjectDetail: FC<Props> = ({ project, children }) => {
           container
           spacing={3}
           direction="row"
-          justify="space-between"
+          justifyContent="space-between"
           alignItems="center"
         >
           <Grid item>
@@ -48,7 +51,7 @@ export const ProjectDetail: FC<Props> = ({ project, children }) => {
           </Grid>
           <Grid item>
             <Link name="edit-project" params={{ projectId: project.id }}>
-              <IconButton color="inherit">{<Edit />}</IconButton>
+              <IconButton color="inherit" size="large">{<Edit />}</IconButton>
             </Link>
           </Grid>
         </Grid>
@@ -62,6 +65,18 @@ export const ProjectDetail: FC<Props> = ({ project, children }) => {
       >
         <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>

src/projects/project-editor.tsx

@@ -1,14 +1,6 @@
 import { gql, Reference, useMutation } from "@apollo/client";
-import {
-  Button,
-  LinearProgress,
-  makeStyles,
-  Paper,
-  Portal,
-  Typography,
-  Grid,
-  IconButton,
-} from "@material-ui/core";
+import { Button, LinearProgress, Paper, Portal, Typography, Grid, IconButton } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
 import { Form, Formik, Field, FormikHelpers } from "formik";
 import { TextField } from "formik-material-ui";
 import { not } from "ramda";
@@ -17,7 +9,7 @@ import { Project } from "../generated/graphql";
 import * as Yup from "yup";
 import { useRouter } from "@curi/react-dom";
 import { useHeaderContainer } from "../layouts";
-import DeleteIcon from "@material-ui/icons/Delete";
+import DeleteIcon from "@mui/icons-material/Delete";
 import { useConfirm } from "material-ui-confirm";
 import { useSnackbar } from "notistack";
 
@@ -178,16 +170,12 @@ export const ProjectEditor: FC<Props> = ({ project }) => {
   return (
     <Paper className={classes.root}>
       <Portal container={headerContainer}>
-        <Grid container justify="space-between" alignItems="center">
+        <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}
-            >
+            <IconButton color="inherit" onClick={handleDelete} disabled={deleting} size="large">
               <DeleteIcon />
             </IconButton>
           )}

src/projects/project-panel.tsx

@@ -1,11 +1,12 @@
 import { gql, useQuery } from "@apollo/client";
 import { Link } from "@curi/react-dom";
-import { Box, List, ListItem, makeStyles, Theme } from "@material-ui/core";
+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 "@material-ui/core";
-import { Button } from "@material-ui/core";
-import { AddBox } from "@material-ui/icons";
+import { ListItemText } from "@mui/material";
+import { Button } from "@mui/material";
+import { AddBox } from "@mui/icons-material";
 import { ActiveLink } from "../commons/route/active-link";
 
 const PROJECTS = gql`

src/routes.tsx

@@ -1,19 +1,21 @@
 import { ApolloClient, InMemoryCache } from "@apollo/client";
 import { prepareRoutes } from "@curi/router";
-import { omit } from 'ramda';
-import React from "react";
+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 { 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 { PIPELINE } from "./pipelines";
+import { CONFIGURATION, PIPELINE, RuntimeConfigEditor } from "./pipelines";
 
 export default prepareRoutes([
   {
@@ -65,13 +67,20 @@ export default prepareRoutes([
       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: units.map((util) => ({ type: util, scripts: [] })),
         },
       };
       return {
@@ -101,6 +110,40 @@ export default prepareRoutes([
       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",