Merge branch 'develop' of ssh://git.ivanli.cc:7018/Fennec/fennec-fe into develop

.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/",
       "webRoot": "${workspaceFolder}",
-      "userDataDir": "/Users/ivan/Projects/.chrome"
+      "userDataDir": ".vscode/chrome"
     }
   ]
 }

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:

package-lock.json

@@ -34,7 +34,7 @@
         "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",
         "ramda": "^0.27.1",
@@ -11326,9 +11326,9 @@
       }
     },
     "node_modules/graphql-scalars": {
-      "version": "1.9.3",
+      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/graphql-scalars/-/graphql-scalars-1.9.3.tgz",
+      "resolved": "https://registry.npmjs.org/graphql-scalars/-/graphql-scalars-1.10.0.tgz",
-      "integrity": "sha512-vP71Og4ALfe3PCk6T+B7LcJHH55gL0tYidmAE/kWT3ScE2FUCFS7iiMXFQXjCaYLi8nZcRLn9HuejGcjZ8kRug==",
+      "integrity": "sha512-LONlj8FfhA2iGpkZJWf5e4PVAHXxnZEHSOEvowLYvNXl/TNnhIck8VmE+lren/aa6GKrG+lZufo5lgnyjxcF6g==",
       "dependencies": {
         "tslib": "~2.2.0"
       },
@@ -28129,6 +28129,7 @@
       "integrity": "sha512-hS4pxwn1ZGXVkmgD4tpFpaumUaAg2ZzbTrxltfC5yPw4BJV+mGkfnQOB4VpWEYZw2jv65Z0wLwDE/piQiPPZ3w==",
       "requires": {
         "@babel/runtime": "^7.6.0",
+        "@date-io/core": "1.x",
         "@types/styled-jsx": "^2.2.8",
         "clsx": "^1.0.2",
         "react-transition-group": "^4.0.0",
@@ -34355,9 +34356,9 @@
       }
     },
     "graphql-scalars": {
-      "version": "1.9.3",
+      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/graphql-scalars/-/graphql-scalars-1.9.3.tgz",
+      "resolved": "https://registry.npmjs.org/graphql-scalars/-/graphql-scalars-1.10.0.tgz",
-      "integrity": "sha512-vP71Og4ALfe3PCk6T+B7LcJHH55gL0tYidmAE/kWT3ScE2FUCFS7iiMXFQXjCaYLi8nZcRLn9HuejGcjZ8kRug==",
+      "integrity": "sha512-LONlj8FfhA2iGpkZJWf5e4PVAHXxnZEHSOEvowLYvNXl/TNnhIck8VmE+lren/aa6GKrG+lZufo5lgnyjxcF6g==",
       "requires": {
         "tslib": "~2.2.0"
       },

package.json

@@ -29,7 +29,7 @@
     "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",
     "ramda": "^0.27.1",

src/commons/auth/auth.provider.tsx

@@ -0,0 +1,45 @@
+import { createContext, useContext, useState } from "react";
+import { FC } from "react";
+import { Login } from "./login";
+
+export interface AuthContext {
+  accessToken: string | undefined;
+  setAccessToken: (token: string) => void;
+  setRefreshToken: (token: string) => void;
+  refreshToken: string | undefined;
+  login: (dto: any) => void;
+  account?: any;
+  setAccount: (dto: any) => void;
+}
+const Context = createContext({} as AuthContext);
+
+export const useAuth = () => useContext(Context);
+
+export const AuthProvider: FC = ({ children }) => {
+  const [accessToken, setAccessToken] = useState<string>();
+  const [refreshToken, setRefreshToken] = useState<string>();
+  const [account, setAccount] = useState<any>();
+
+  const login = (dto: any) => {
+    setAccessToken(dto.accessToken);
+    setRefreshToken(dto.refreshToken);
+    setAccount(dto.account);
+  };
+
+  return (
+    <Context.Provider
+      value={{
+        accessToken,
+        setAccessToken,
+        refreshToken,
+        setRefreshToken,
+        login,
+        account,
+        setAccount,
+      }}
+    >
+      {children}
+      {/* {accessToken ? null : <Login />} */}
+    </Context.Provider>
+  );
+};

src/commons/auth/login.tsx

@@ -0,0 +1,51 @@
+import { makeStyles } from "@material-ui/core";
+import { FC, useEffect, useRef } from "react";
+import { useAuth } from "./auth.provider";
+const useStyles = makeStyles({
+  iframe: {
+    height: "300px",
+    width: "500px",
+    position: "absolute",
+    top: "100px",
+    left: "50%",
+    transform: "translateX(-50%)",
+  },
+});
+
+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 (
+    <iframe
+      ref={iframeRef}
+      className={classes.iframe}
+      title="Auth"
+      src="http://user.localhost/auth/login"
+    ></iframe>
+  );
+};

src/generated/graphql.schema.json

@@ -1949,22 +1949,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

@@ -255,7 +255,6 @@ export enum TaskStatuses {
 }
 
 export type UpdatePipelineInput = {
-  projectId: Scalars['String'];
   branch: Scalars['String'];
   name: Scalars['String'];
   workUnitMetadata: WorkUnitMetadataInput;

src/index.tsx

@@ -10,24 +10,27 @@ 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 Router from "./commons/route/router";
+import { AuthProvider } from "./commons/auth/auth.provider";
 
-  ReactDOM.render(
+ReactDOM.render(
-    <React.StrictMode>
+  <React.StrictMode>
-      <ConfirmProvider>
+    <ConfirmProvider>
-        <SnackbarProvider maxSnack={5}>
+      <SnackbarProvider maxSnack={5}>
-          <FennecApolloClientProvider>
+        <FennecApolloClientProvider>
-            <MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
+          <MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
+            <AuthProvider>
               <Router>
                 <App />
               </Router>
-            </MuiPickersUtilsProvider>
+            </AuthProvider>
-          </FennecApolloClientProvider>
+          </MuiPickersUtilsProvider>
-        </SnackbarProvider>
+        </FennecApolloClientProvider>
-      </ConfirmProvider>
+      </SnackbarProvider>
-    </React.StrictMode>,
+    </ConfirmProvider>
-    document.getElementById("root")
+  </React.StrictMode>,
-  );
+  document.getElementById("root")
+);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

src/pipelines/pipeline-editor.tsx

@@ -1,4 +1,4 @@
-import { gql, Reference, useMutation, useQuery } from "@apollo/client";
+import { gql, Reference, useMutation } from "@apollo/client";
 import { useRouter } from "@curi/react-dom";
 import {
   Button,
@@ -13,21 +13,17 @@ import {
 import { Delete } from "@material-ui/icons";
 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 { 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>;
 
@@ -108,7 +104,7 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
       if (isCreate) {
         await createPipeline({
           variables: {
-            input: values,
+            pipeline: values,
           },
         }).then(({ data }) => {
           pipelineId = data!.createPipeline.id;
@@ -277,7 +273,7 @@ const ScriptsField: FC<TextFieldProps> = ({ field, form, meta, ...props }) => {
         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/projects/project-detail.tsx

@@ -1,10 +1,20 @@
 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,
+  makeStyles,
+  Paper,
+  Portal,
+  Typography,
+  Box,
+} from "@material-ui/core";
 import { useHeaderContainer } from "../layouts";
 import { PipelineList } from "../pipelines/pipeline-list";
 import { Edit } from '@material-ui/icons';
 import { Link } from '@curi/react-dom';
+import { Button } from "@material-ui/core";
+import { AddBox } from "@material-ui/icons";
 
 interface Props {
   project: Project;
@@ -62,6 +72,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/routes.tsx

@@ -1,17 +1,19 @@
 import { ApolloClient, InMemoryCache } from "@apollo/client";
 import { prepareRoutes } from "@curi/router";
-import { omit } from 'ramda';
+import { omit } from "ramda";
 import React from "react";
 import { ProjectDetail, ProjectEditor, PROJECT } from "./projects";
-import { COMMIT_LIST_QUERY } from './commons/graphql/queries';
+import { COMMIT_LIST_QUERY } from "./commons/graphql/queries";
-import { CommitList } from './commits/commit-list';
+import { CommitList } from "./commits/commit-list";
-import { PipelineTaskDetail } from './pipeline-tasks/pipeline-task-detail';
+import { PipelineTaskDetail } from "./pipeline-tasks/pipeline-task-detail";
 import { PipelineEditor } from "./pipelines/pipeline-editor";
 import {
   CreatePipelineInput,
   CreateProjectInput,
   Pipeline,
+  PipelineUnits,
   Project,
+  WorkUnitInput,
 } from "./generated/graphql";
 import { PIPELINE } from "./pipelines";
 
@@ -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 {