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

fix: snackbar 导致界面不可点击的问题
feat(pipelines): runtime configuration.
2021-10-19 23:05:59 +08:00 · 2021-10-04 11:05:59 +08:00 · 2021-10-04 09:54:10 +08:00 · 2021-10-01 15:40:21 +08:00 · 2021-10-01 01:19:55 +08:00 · 2021-10-01 00:32:08 +08:00
24 changed files with 17477 additions and 11378 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,8 +1,9 @@
 {
  "cSpell.words": [
-    "Formik",
    "clsx",
    "fontsource",
+    "Formik",
+    "noconflict",
    "notistack",
    "unmount",
    "vditor"
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -7,15 +7,16 @@
    "@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",
@ -23,6 +24,7 @@
    "@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",
@ -33,9 +35,10 @@
    "graphql": "^15.5.0",
    "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",
@ -44,7 +47,7 @@
    "yup": "^0.32.9"
  },
  "scripts": {
-    "start": "BROWSER=none craco start",
+    "start": "BROWSER=none PORT=auto craco start",
    "build": "craco build",
    "test": "craco test",
    "prestart": "npm run graphql",
--- a/src/App.tsx
+++ b/src/App.tsx
@ -3,9 +3,12 @@ import './App.css';
 import { DefaultLayout } from './layouts';

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

-const { body: Body } = response;
+  const { body: Body } = response;
+  if (!Body) {
+    return <DefaultLayout> Client has some wrong!</DefaultLayout>;
+  }
  return (
    <DefaultLayout>
      <Body response={response} />
--- a/src/commits/commit-list.tsx
+++ b/src/commits/commit-list.tsx
@ -13,10 +13,10 @@ import {
  ListItemIcon,
  ListItemSecondaryAction,
  ListItemText,
-  makeStyles,
  useTheme,
-  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,11 +133,10 @@ const Item: FC<{ commit: Commit; pipeline: Pipeline }> = ({
 }) => {
  const [isOpen, setOpen] = useState(() => false);

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

  const units = useMemo(
    () => pipeline.workUnitMetadata.units.map((unit) => unit.type),
@ -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>
        )}
--- a/src/commons/auth/login.tsx
+++ b/src/commons/auth/login.tsx
@ -1,28 +1,30 @@
-import { makeStyles } from "@material-ui/core";
+import makeStyles from "@mui/styles/makeStyles";
 import { FC, Fragment, useEffect, useRef } from "react";
 import { useAuth } from "./auth.provider";
-const useStyles = makeStyles((theme) => ({
-  iframe: {
-    height: "300px",
-    width: "500px",
-    position: "absolute",
-    top: "100px",
-    left: "50%",
-    transform: "translateX(-50%)",
-    zIndex: theme.zIndex.modal,
-    border: "none",
-    boxShadow: theme.shadows[4],
-  },
-  mask: {
-    top: "0",
-    left: "0",
-    bottom: "0",
-    right: "0",
-    position: "absolute",
-    backgroundColor: "rgba(0, 0, 0, 0.3)",
-    zIndex: theme.zIndex.modal,
-  },
-}));
+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);
--- a/src/commons/fallbacks/error-page.tsx
+++ b/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}) => {
--- a/src/commons/form/yaml-editor/yaml-editor.tsx
+++ b/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),
+}));
--- a/src/commons/route/router.tsx
+++ b/src/commons/route/router.tsx
@ -4,7 +4,7 @@ import { createRouter, announce } from "@curi/router";
 import { browser } from "@hickory/browser";
 import { FC, useEffect, useState } from "react";
 import routes from "../../routes";
-import { LinearProgress } from "@material-ui/core";
+import { LinearProgress } from "@mui/material";

 const Component: FC = ({ children }) => {
  const client = useApolloClient();
--- a/src/generated/graphql.schema.json
+++ b/src/generated/graphql.schema.json
@ -1176,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,
@ -2021,13 +2037,9 @@
              }
            ],
            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "OBJECT",
-                "name": "Configuration",
-                "ofType": null
-              }
+              "kind": "OBJECT",
+              "name": "Configuration",
+              "ofType": null
            },
            "isDeprecated": false,
            "deprecationReason": null
@ -2044,6 +2056,18 @@
        "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,
@ -2107,6 +2131,18 @@
            "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,
--- a/src/generated/graphql.tsx
+++ b/src/generated/graphql.tsx
@ -148,6 +148,7 @@ export type Pipeline = {
  branch: Scalars['String'];
  name: Scalars['String'];
  workUnitMetadata: WorkUnitMetadata;
+  environment: Scalars['String'];
 };

 export type PipelineTask = {
@ -214,7 +215,7 @@ export type Query = {
  commits?: Maybe<Array<Commit>>;
  listPipelineTaskByPipelineId: Array<PipelineTask>;
  pipelineTask: PipelineTask;
-  getConfiguration: Configuration;
+  getConfiguration?: Maybe<Configuration>;
 };


@ -255,10 +256,12 @@ export type QueryGetConfigurationArgs = {
 };

 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 = {
--- a/src/index.tsx
+++ b/src/index.tsx
@ -5,28 +5,41 @@ import "fontsource-roboto";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { AppApolloClientProvider } from "./commons/graphql/client";
-import { MuiPickersUtilsProvider } from "@material-ui/pickers";
-import DateFnsUtils from "@date-io/date-fns";
-import zhLocale from "date-fns/locale/zh-CN";
 import { ConfirmProvider } from "material-ui-confirm";
 import { SnackbarProvider } from "notistack";
 import Router from "./commons/route/router";
 import { AuthProvider } from "./commons/auth/auth.provider";
+import { 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>
-      <SnackbarProvider maxSnack={5}>
-        <AuthProvider>
-          <AppApolloClientProvider>
-            <MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
-              <Router>
-                <App />
-              </Router>
-            </MuiPickersUtilsProvider>
-          </AppApolloClientProvider>
-        </AuthProvider>
-      </SnackbarProvider>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}>
+          <SnackbarProvider maxSnack={5}>
+            <AuthProvider>
+              <AppApolloClientProvider>
+                <Router>
+                  <App />
+                </Router>
+              </AppApolloClientProvider>
+            </AuthProvider>
+          </SnackbarProvider>
+        </ThemeProvider>
+      </StyledEngineProvider>
    </ConfirmProvider>
  </React.StrictMode>,
  document.getElementById("root")
--- a/src/layouts/default.tsx
+++ b/src/layouts/default.tsx
@ -1,20 +1,17 @@
 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 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;
@ -127,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>
@ -147,7 +144,7 @@ export const DefaultLayout: FC = ({ children }) => {
        }}
      >
        <div className={classes.toolbar}>
-          <IconButton onClick={handleDrawerClose}>
+          <IconButton onClick={handleDrawerClose} size="large">
            {theme.direction === "rtl" ? (
              <ChevronRightIcon />
            ) : (
--- a/src/pipeline-tasks/pipeline-task-detail.tsx
+++ b/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";
--- a/src/pipelines/index.ts
+++ b/src/pipelines/index.ts
@ -1,3 +1,4 @@
 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
@ -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
+    }
+  }
+`;
--- a/src/pipelines/pipeline-editor.tsx
+++ b/src/pipelines/pipeline-editor.tsx
@ -1,16 +1,8 @@
 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 { useConfirm } from "material-ui-confirm";
@ -69,6 +61,7 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
                    id
                    projectId
                    branch
+                    environment
                    name
                    workUnitMetadata {
                      version
@ -176,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>
@ -185,6 +178,7 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
              color="inherit"
              onClick={handleDelete}
              disabled={deleting}
+              size="large"
            >
              <Delete />
            </IconButton>
@ -198,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}
@ -214,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}
--- a/src/pipelines/pipeline-list.tsx
+++ b/src/pipelines/pipeline-list.tsx
@ -5,12 +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 { 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;
@ -22,6 +30,7 @@ const PIPELINES = gql`
      id
      name
      branch
+      environment
    }
    project(id: $projectId) {
      id
@ -42,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}
+    <>
+      <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();
+          }}
        >
-          <Item pipeline={pipeline} />
-        </Link>
-      ))}
-    </List>
+          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" />
-            {pipeline.branch}
-          </Typography>
+          <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>
  );
 };
--- a/src/pipelines/queries.ts
+++ b/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 {
@ -16,4 +17,20 @@ 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
+    }
+  }
+`;
--- a/src/pipelines/runtime-config-editor.tsx
+++ b/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>
+  );
+};
--- a/src/projects/project-detail.tsx
+++ b/src/projects/project-detail.tsx
@ -1,20 +1,13 @@
 import { Project } from "../generated/graphql";
 import React, { FC, Fragment } from "react";
-import {
-  IconButton,
-  Grid,
-  makeStyles,
-  Paper,
-  Portal,
-  Typography,
-  Box,
-} 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 "@material-ui/core";
-import { AddBox } from "@material-ui/icons";
+import { Button } from "@mui/material";
+import { AddBox } from "@mui/icons-material";

 interface Props {
  project: Project;
@ -45,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>
@ -58,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>
--- a/src/projects/project-editor.tsx
+++ b/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>
          )}
--- a/src/projects/project-panel.tsx
+++ b/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`
--- a/src/routes.tsx
+++ b/src/routes.tsx
@ -7,13 +7,15 @@ 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([
  {
@ -108,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",
Author	SHA1	Message	Date
Ivan Li	832d77d57a	feat: 添加 pipeline 的部署环境配置与展示。	2021-10-19 23:05:59 +08:00
Ivan Li	e8620c2818	fix: snackbar 导致界面不可点击的问题	2021-10-04 11:05:59 +08:00
Ivan Li	320506af68	feat(pipelines): runtime configuration.	2021-10-04 09:54:10 +08:00
Ivan Li	5d01389f3b	feat(pipelines): 列表添加右键菜单。	2021-10-01 15:40:21 +08:00
Ivan Li	60d7d7fe5c	chore: migration mui v4 -> v5.	2021-10-01 01:19:55 +08:00
Ivan Li	5f024f6028	chore: update deps.	2021-10-01 00:32:08 +08:00