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
16 changed files with 6613 additions and 2408 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
@@ -9,9 +9,9 @@
    "@curi/router": "^2.1.2",
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.35",
-    "@fortawesome/free-solid-svg-icons": "^5.15.3",
-    "@fortawesome/react-fontawesome": "^0.1.14",
+    "@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",
    "@mui/icons-material": "^5.0.1",
    "@mui/lab": "^5.0.0-alpha.49",
@@ -24,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",
@@ -34,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",
--- a/src/App.tsx
+++ b/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} />
--- a/src/commons/auth/login.tsx
+++ b/src/commons/auth/login.tsx
@@ -2,7 +2,6 @@ import makeStyles from "@mui/styles/makeStyles";
 import { FC, Fragment, useEffect, useRef } from "react";
 import { useAuth } from "./auth.provider";
 const useStyles = makeStyles((theme) => {
-  debugger;
  return {
    iframe: {
      height: "300px",
--- 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/generated/graphql.schema.json
+++ b/src/generated/graphql.schema.json
@@ -167,6 +167,178 @@
        "enumValues": null,
        "possibleTypes": null
      },
+      {
+        "kind": "OBJECT",
+        "name": "Configuration",
+        "description": null,
+        "fields": [
+          {
+            "name": "id",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "ID",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "pipeline",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "OBJECT",
+                "name": "Pipeline",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "pipelineId",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "project",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "OBJECT",
+                "name": "Project",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "projectId",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "content",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "name",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "language",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "ENUM",
+                "name": "ConfigurationLanguage",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          }
+        ],
+        "inputFields": null,
+        "interfaces": [],
+        "enumValues": null,
+        "possibleTypes": null
+      },
+      {
+        "kind": "SCALAR",
+        "name": "ID",
+        "description": "The `ID` scalar type represents a unique identifier, often used to refetch an object or as key for a cache. The ID type appears in a JSON response as a String; however, it is not intended to be human-readable. When expected as an input type, any string (such as `\"4\"`) or integer (such as `4`) input value will be accepted as an ID.",
+        "fields": null,
+        "inputFields": null,
+        "interfaces": null,
+        "enumValues": null,
+        "possibleTypes": null
+      },
+      {
+        "kind": "ENUM",
+        "name": "ConfigurationLanguage",
+        "description": null,
+        "fields": null,
+        "inputFields": null,
+        "interfaces": null,
+        "enumValues": [
+          {
+            "name": "JavaScript",
+            "description": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "YAML",
+            "description": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          }
+        ],
+        "possibleTypes": null
+      },
      {
        "kind": "INPUT_OBJECT",
        "name": "CreatePipelineInput",
@@ -844,6 +1016,39 @@
            },
            "isDeprecated": false,
            "deprecationReason": null
+          },
+          {
+            "name": "setConfiguration",
+            "description": null,
+            "args": [
+              {
+                "name": "setConfigurationInput",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "INPUT_OBJECT",
+                    "name": "SetConfigurationInput",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              }
+            ],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "OBJECT",
+                "name": "Configuration",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
          }
        ],
        "inputFields": null,
@@ -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",
--- a/src/generated/graphql.tsx
+++ b/src/generated/graphql.tsx
@@ -26,6 +26,23 @@ export type Commit = {
  tasks: Array<PipelineTask>;
 };

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


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

+
+export type MutationSetConfigurationArgs = {
+  setConfigurationInput: SetConfigurationInput;
+};
+
 export type Pipeline = {
  __typename?: 'Pipeline';
  id: Scalars['ID'];
@@ -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']>;
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -9,8 +9,7 @@ import { ConfirmProvider } from "material-ui-confirm";
 import { SnackbarProvider } from "notistack";
 import Router from "./commons/route/router";
 import { AuthProvider } from "./commons/auth/auth.provider";
-import { LocalizationProvider } from "@mui/lab";
-import AdapterDateFns from "@mui/lab/AdapterDateFns";
+import { zhCN } from "@mui/material/locale";
 import {
  ThemeProvider,
  Theme,
@@ -23,7 +22,7 @@ declare module "@mui/styles/defaultTheme" {
  interface DefaultTheme extends Theme {}
 }

-const theme = createTheme();
+const theme = createTheme({}, zhCN);

 ReactDOM.render(
  <React.StrictMode>
@@ -33,11 +32,9 @@ ReactDOM.render(
          <SnackbarProvider maxSnack={5}>
            <AuthProvider>
              <AppApolloClientProvider>
-                <LocalizationProvider dateAdapter={AdapterDateFns}>
-                  <Router>
-                    <App />
-                  </Router>
-                </LocalizationProvider>
+                <Router>
+                  <App />
+                </Router>
              </AppApolloClientProvider>
            </AuthProvider>
          </SnackbarProvider>
--- 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
@@ -61,6 +61,7 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
                    id
                    projectId
                    branch
+                    environment
                    name
                    workUnitMetadata {
                      version
@@ -173,7 +174,12 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
            {isCreate ? "Create" : "Edit"} Pipeline
          </Typography>
          {isCreate ? null : (
-            <IconButton color="inherit" onClick={handleDelete} disabled={deleting} size="large">
+            <IconButton
+              color="inherit"
+              onClick={handleDelete}
+              disabled={deleting}
+              size="large"
+            >
              <Delete />
            </IconButton>
          )}
@@ -186,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}
@@ -202,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,16 +5,20 @@ import {
  ListItem,
  Typography,
  ListItemText,
-  ListItemSecondaryAction,
-  IconButton,
  Menu,
  MenuItem,
  PopoverPosition,
 } from "@mui/material";
-import { FC, MouseEventHandler, useMemo, useState } from "react";
+import { FC, useMemo, useState, MouseEvent } from "react";
 import { Pipeline, Project } from "../generated/graphql";
-import { CallMerge, Edit } from "@mui/icons-material";
-import { any, values } from "ramda";
+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;
@@ -26,6 +30,7 @@ const PIPELINES = gql`
      id
      name
      branch
+      environment
    }
    project(id: $projectId) {
      id
@@ -47,17 +52,48 @@ export const PipelineList: FC<Props> = ({ projectId }) => {
    }));
  }, [data]);

-  const [contextMenu, setContextMenu] = useState<PopoverPosition>();
+  const [contextMenu, setContextMenu] = useState<[PopoverPosition, Pipeline]>();
+  const { navigate, url } = useRouter();

-  const handleContextMenu: MouseEventHandler = (event) => {
+  const handleContextMenu = (event: MouseEvent, pipeline: Pipeline | false) => {
    event.preventDefault();
-    setContextMenu({ top: event.clientY - 4, left: event.clientX - 2 });
+    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>
@@ -66,7 +102,7 @@ export const PipelineList: FC<Props> = ({ projectId }) => {
            name="pipeline-commits"
            params={{ pipelineId: pipeline.id, projectId: projectId }}
            key={pipeline.id}
-            onContextMenu={handleContextMenu}
+            onContextMenu={(ev) => handleContextMenu(ev, pipeline)}
          >
            <Item pipeline={pipeline} />
          </Link>
@@ -76,49 +112,81 @@ export const PipelineList: FC<Props> = ({ projectId }) => {
        keepMounted
        open={!!contextMenu}
        onClose={handleClose}
+        onContextMenu={(ev) => handleContextMenu(ev, false)}
        anchorReference="anchorPosition"
-        anchorPosition={
-          contextMenu && any(Boolean, values(contextMenu))
-            ? contextMenu
-            : undefined
-        }
+        anchorPosition={contextMenu?.[0]}
      >
-        <MenuItem onClick={handleClose}>Copy</MenuItem>
-        <MenuItem onClick={handleClose}>Print</MenuItem>
-        <MenuItem onClick={handleClose}>Highlight</MenuItem>
-        <MenuItem onClick={handleClose}>Email</MenuItem>
+        <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" />
-            {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} size="large">
-          <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 {
@@ -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
+    }
+  }
+`;
--- 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/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