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

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",
@@ -35,7 +35,7 @@
     "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",

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
-              }
             },
             "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,

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 = {

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>
               </AppApolloClientProvider>
             </AuthProvider>
           </SnackbarProvider>

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 {

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}

src/pipelines/pipeline-list.tsx

@@ -13,6 +13,12 @@ import { FC, useMemo, useState, MouseEvent } from "react";
 import { Pipeline, Project } from "../generated/graphql";
 import { CallMerge } from "@mui/icons-material";
 import { Divider } from "@material-ui/core";
+import { Box } from "@mui/system";
+import {
+  faCodeBranch,
+  faMapMarkerAlt,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 interface Props {
   projectId: string;
@@ -24,6 +30,7 @@ const PIPELINES = gql`
       id
       name
       branch
+      environment
     }
     project(id: $projectId) {
       id
@@ -140,10 +147,44 @@ const Item = ({ pipeline }: { pipeline: Pipeline }) => {
       <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>
         }
       />
     </ListItem>

src/pipelines/queries.ts

@@ -7,6 +7,7 @@ export const PIPELINE = gql`
       name
       projectId
       branch
+      environment
       workUnitMetadata {
         version
         units {