Fennec/fennec-fe
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: Fennec:5ea803c8a4ec08b08cf351ed992bff55b201887f
Branches Tags
Fennec:master Fennec:develop Fennec:v0.1.0-preact-version
...
compare: Fennec:develop
Branches Tags
Fennec:develop Fennec:master Fennec:v0.1.0-preact-version

6 Commits
5ea803c8a4 ... develop

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
24 changed files with 17477 additions and 11378 deletions
Expand all files Collapse all files

3
.vscode/settings.json vendored
View File

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

28219
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

23
package.json
View File

@ -7,15 +7,16 @@
"@craco/craco": "^6.3.0", "@craco/craco": "^6.3.0",
"@curi/react-dom": "^2.0.4", "@curi/react-dom": "^2.0.4",
"@curi/router": "^2.1.2", "@curi/router": "^2.1.2",
"@date-io/date-fns": "^1.3.13", "@emotion/react": "^11.4.1",
"@fortawesome/fontawesome-svg-core": "^1.2.35", "@emotion/styled": "^11.3.0",
"@fortawesome/free-solid-svg-icons": "^5.15.3", "@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/react-fontawesome": "^0.1.14", "@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.16",
"@hickory/browser": "^2.1.0", "@hickory/browser": "^2.1.0",
"@material-ui/core": "^4.11.3", "@mui/icons-material": "^5.0.1",
"@material-ui/icons": "^4.11.2", "@mui/lab": "^5.0.0-alpha.49",
"@material-ui/lab": "*", "@mui/material": "^5.0.2",
"@material-ui/pickers": "^3.3.10", "@mui/styles": "^5.0.1",
"@testing-library/jest-dom": "^5.11.10", "@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^11.2.6", "@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^12.8.3", "@testing-library/user-event": "^12.8.3",
@ -23,6 +24,7 @@
"@types/node": "^12.20.10", "@types/node": "^12.20.10",
"@types/react": "^17.0.3", "@types/react": "^17.0.3",
"@types/react-dom": "^17.0.3", "@types/react-dom": "^17.0.3",
"ace-builds": "^1.4.13",
"apollo-link-scalars": "^2.1.3", "apollo-link-scalars": "^2.1.3",
"configuration": "file:../configuration", "configuration": "file:../configuration",
"date-fns": "^2.21.1", "date-fns": "^2.21.1",
@ -33,9 +35,10 @@
"graphql": "^15.5.0", "graphql": "^15.5.0",
"graphql-scalars": "^1.10.0", "graphql-scalars": "^1.10.0",
"material-ui-confirm": "^2.1.2", "material-ui-confirm": "^2.1.2",
"notistack": "^1.0.6", "notistack": "^2.0.2",
"ramda": "^0.27.1", "ramda": "^0.27.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-ace": "^9.4.4",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"typescript": "^4.2.4", "typescript": "^4.2.4",
@ -44,7 +47,7 @@
"yup": "^0.32.9" "yup": "^0.32.9"
}, },
"scripts": { "scripts": {
"start": "BROWSER=none craco start", "start": "BROWSER=none PORT=auto craco start",
"build": "craco build", "build": "craco build",
"test": "craco test", "test": "craco test",
"prestart": "npm run graphql", "prestart": "npm run graphql",

7
src/App.tsx
View File

@ -3,9 +3,12 @@ import './App.css';
import { DefaultLayout } from './layouts'; import { DefaultLayout } from './layouts';
function App() { 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 ( return (
<DefaultLayout> <DefaultLayout>
<Body response={response} /> <Body response={response} />

20
src/commits/commit-list.tsx
View File

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

48
src/commons/auth/login.tsx
View File

@ -1,28 +1,30 @@
import { makeStyles } from "@material-ui/core"; import makeStyles from "@mui/styles/makeStyles";
import { FC, Fragment, useEffect, useRef } from "react"; import { FC, Fragment, useEffect, useRef } from "react";
import { useAuth } from "./auth.provider"; import { useAuth } from "./auth.provider";
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => {
iframe: { return {
height: "300px", iframe: {
width: "500px", height: "300px",
position: "absolute", width: "500px",
top: "100px", position: "absolute",
left: "50%", top: "100px",
transform: "translateX(-50%)", left: "50%",
zIndex: theme.zIndex.modal, transform: "translateX(-50%)",
border: "none", zIndex: theme.zIndex.modal,
boxShadow: theme.shadows[4], border: "none",
}, boxShadow: theme.shadows[4],
mask: { },
top: "0", mask: {
left: "0", top: "0",
bottom: "0", left: "0",
right: "0", bottom: "0",
position: "absolute", right: "0",
backgroundColor: "rgba(0, 0, 0, 0.3)", position: "absolute",
zIndex: theme.zIndex.modal, backgroundColor: "rgba(0, 0, 0, 0.3)",
}, zIndex: theme.zIndex.modal,
})); },
};
});
export const Login: FC = () => { export const Login: FC = () => {
const iframeRef = useRef<HTMLIFrameElement>(null); const iframeRef = useRef<HTMLIFrameElement>(null);

2
src/commons/fallbacks/error-page.tsx
View File

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

28
src/commons/form/yaml-editor/yaml-editor.tsx Normal file
View File

@ -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),
}));

2
src/commons/route/router.tsx
View File

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

50
src/generated/graphql.schema.json
View File

@ -1176,6 +1176,22 @@
}, },
"isDeprecated": false, "isDeprecated": false,
"deprecationReason": null "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, "inputFields": null,
@ -2021,13 +2037,9 @@
} }
], ],
"type": { "type": {
"kind": "NON_NULL", "kind": "OBJECT",
"name": null, "name": "Configuration",
"ofType": { "ofType": null
"kind": "OBJECT",
"name": "Configuration",
"ofType": null
}
}, },
"isDeprecated": false, "isDeprecated": false,
"deprecationReason": null "deprecationReason": null
@ -2044,6 +2056,18 @@
"description": null, "description": null,
"fields": null, "fields": null,
"inputFields": [ "inputFields": [
{
"name": "id",
"description": null,
"type": {
"kind": "SCALAR",
"name": "String",
"ofType": null
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{ {
"name": "pipelineId", "name": "pipelineId",
"description": null, "description": null,
@ -2107,6 +2131,18 @@
"defaultValue": null, "defaultValue": null,
"isDeprecated": false, "isDeprecated": false,
"deprecationReason": null "deprecationReason": null
},
{
"name": "name",
"description": null,
"type": {
"kind": "SCALAR",
"name": "String",
"ofType": null
},
"defaultValue": "\"Default Configuration\"",
"isDeprecated": false,
"deprecationReason": null
} }
], ],
"interfaces": null, "interfaces": null,

5
src/generated/graphql.tsx
View File

@ -148,6 +148,7 @@ export type Pipeline = {
branch: Scalars['String']; branch: Scalars['String'];
name: Scalars['String']; name: Scalars['String'];
workUnitMetadata: WorkUnitMetadata; workUnitMetadata: WorkUnitMetadata;
environment: Scalars['String'];
}; };
export type PipelineTask = { export type PipelineTask = {
@ -214,7 +215,7 @@ export type Query = {
commits?: Maybe<Array<Commit>>; commits?: Maybe<Array<Commit>>;
listPipelineTaskByPipelineId: Array<PipelineTask>; listPipelineTaskByPipelineId: Array<PipelineTask>;
pipelineTask: PipelineTask; pipelineTask: PipelineTask;
getConfiguration: Configuration; getConfiguration?: Maybe<Configuration>;
}; };
@ -255,10 +256,12 @@ export type QueryGetConfigurationArgs = {
}; };
export type SetConfigurationInput = { export type SetConfigurationInput = {
id?: Maybe<Scalars['String']>;
pipelineId: Scalars['String']; pipelineId: Scalars['String'];
projectId: Scalars['String']; projectId: Scalars['String'];
content: Scalars['String']; content: Scalars['String'];
language: ConfigurationLanguage; language: ConfigurationLanguage;
name?: Maybe<Scalars['String']>;
}; };
export type Subscription = { export type Subscription = {

41
src/index.tsx
View File

@ -5,28 +5,41 @@ import "fontsource-roboto";
import App from "./App"; import App from "./App";
import reportWebVitals from "./reportWebVitals"; import reportWebVitals from "./reportWebVitals";
import { AppApolloClientProvider } from "./commons/graphql/client"; 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 { ConfirmProvider } from "material-ui-confirm";
import { SnackbarProvider } from "notistack"; import { SnackbarProvider } from "notistack";
import Router from "./commons/route/router"; import Router from "./commons/route/router";
import { AuthProvider } from "./commons/auth/auth.provider"; 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( ReactDOM.render(
<React.StrictMode> <React.StrictMode>
<ConfirmProvider> <ConfirmProvider>
<SnackbarProvider maxSnack={5}> <StyledEngineProvider injectFirst>
<AuthProvider> <ThemeProvider theme={theme}>
<AppApolloClientProvider> <SnackbarProvider maxSnack={5}>
<MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}> <AuthProvider>
<Router> <AppApolloClientProvider>
<App /> <Router>
</Router> <App />
</MuiPickersUtilsProvider> </Router>
</AppApolloClientProvider> </AppApolloClientProvider>
</AuthProvider> </AuthProvider>
</SnackbarProvider> </SnackbarProvider>
</ThemeProvider>
</StyledEngineProvider>
</ConfirmProvider> </ConfirmProvider>
</React.StrictMode>, </React.StrictMode>,
document.getElementById("root") document.getElementById("root")

31
src/layouts/default.tsx
View File

@ -1,20 +1,17 @@
import React, { FC, useCallback, useState } from "react"; import React, { FC, useCallback, useState } from "react";
import clsx from "clsx"; import clsx from "clsx";
import { import { useTheme, Theme } from "@mui/material/styles";
createStyles, import createStyles from '@mui/styles/createStyles';
makeStyles, import makeStyles from '@mui/styles/makeStyles';
useTheme, import Drawer from "@mui/material/Drawer";
Theme, import AppBar from "@mui/material/AppBar";
} from "@material-ui/core/styles"; import Toolbar from "@mui/material/Toolbar";
import Drawer from "@material-ui/core/Drawer"; import CssBaseline from "@mui/material/CssBaseline";
import AppBar from "@material-ui/core/AppBar"; import Divider from "@mui/material/Divider";
import Toolbar from "@material-ui/core/Toolbar"; import IconButton from "@mui/material/IconButton";
import CssBaseline from "@material-ui/core/CssBaseline"; import MenuIcon from "@mui/icons-material/Menu";
import Divider from "@material-ui/core/Divider"; import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import IconButton from "@material-ui/core/IconButton"; import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import MenuIcon from "@material-ui/icons/Menu";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import { ProjectPanel } from "../projects/project-panel"; import { ProjectPanel } from "../projects/project-panel";
import { HeaderContainerProvider } from "./header-container"; import { HeaderContainerProvider } from "./header-container";
const drawerWidth = 240; const drawerWidth = 240;
@ -127,7 +124,7 @@ export const DefaultLayout: FC = ({ children }) => {
className={clsx(classes.menuButton, { className={clsx(classes.menuButton, {
[classes.hide]: open, [classes.hide]: open,
})} })}
> size="large">
<MenuIcon /> <MenuIcon />
</IconButton> </IconButton>
<div className={classes.headerContaner} ref={onRefChange}></div> <div className={classes.headerContaner} ref={onRefChange}></div>
@ -147,7 +144,7 @@ export const DefaultLayout: FC = ({ children }) => {
}} }}
> >
<div className={classes.toolbar}> <div className={classes.toolbar}>
<IconButton onClick={handleDrawerClose}> <IconButton onClick={handleDrawerClose} size="large">
{theme.direction === "rtl" ? ( {theme.direction === "rtl" ? (
<ChevronRightIcon /> <ChevronRightIcon />
) : ( ) : (

3
src/pipeline-tasks/pipeline-task-detail.tsx
View File

@ -1,5 +1,6 @@
import { gql, useQuery, useSubscription } from "@apollo/client"; 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 { format } from "date-fns";
import { FC, useState } from "react"; import { FC, useState } from "react";
import { ErrorPage } from "../commons/fallbacks/error-page"; import { ErrorPage } from "../commons/fallbacks/error-page";

1
src/pipelines/index.ts
View File

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

11
src/pipelines/mutations.ts
View File

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

30
src/pipelines/pipeline-editor.tsx
View File

@ -1,16 +1,8 @@
import { gql, Reference, useMutation } from "@apollo/client"; import { gql, Reference, useMutation } from "@apollo/client";
import { useRouter } from "@curi/react-dom"; import { useRouter } from "@curi/react-dom";
import { import { Button, Grid, IconButton, LinearProgress, Paper, Portal, Typography } from "@mui/material";
Button, import makeStyles from '@mui/styles/makeStyles';
Grid, import { Delete } from "@mui/icons-material";
IconButton,
LinearProgress,
makeStyles,
Paper,
Portal,
Typography,
} from "@material-ui/core";
import { Delete } from "@material-ui/icons";
import { FormikHelpers, Formik, Form, Field } from "formik"; import { FormikHelpers, Formik, Form, Field } from "formik";
import { TextField, TextFieldProps } from "formik-material-ui"; import { TextField, TextFieldProps } from "formik-material-ui";
import { useConfirm } from "material-ui-confirm"; import { useConfirm } from "material-ui-confirm";
@ -69,6 +61,7 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
id id
projectId projectId
branch branch
environment
name name
workUnitMetadata { workUnitMetadata {
version version
@ -176,7 +169,7 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
return ( return (
<Paper className={classes.root}> <Paper className={classes.root}>
<Portal container={headerContainer}> <Portal container={headerContainer}>
<Grid container justify="space-between" alignItems="center"> <Grid container justifyContent="space-between" alignItems="center">
<Typography variant="h6" component="h1"> <Typography variant="h6" component="h1">
{isCreate ? "Create" : "Edit"} Pipeline {isCreate ? "Create" : "Edit"} Pipeline
</Typography> </Typography>
@ -185,6 +178,7 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
color="inherit" color="inherit"
onClick={handleDelete} onClick={handleDelete}
disabled={deleting} disabled={deleting}
size="large"
> >
<Delete /> <Delete />
</IconButton> </IconButton>
@ -198,7 +192,10 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
.max(32, "Must be 32 characters or less") .max(32, "Must be 32 characters or less")
.required("Required"), .required("Required"),
branch: Yup.string() 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"), .required("Required"),
})} })}
onSubmit={submitForm} onSubmit={submitForm}
@ -214,6 +211,13 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
fullWidth fullWidth
margin="normal" margin="normal"
/> />
<Field
component={TextField}
name="environment"
label="Environment"
fullWidth
margin="normal"
/>
<Paper className={classes.metadataContainer}> <Paper className={classes.metadataContainer}>
<Field <Field
component={TextField} component={TextField}

171
src/pipelines/pipeline-list.tsx
View File

@ -5,12 +5,20 @@ import {
ListItem, ListItem,
Typography, Typography,
ListItemText, ListItemText,
ListItemSecondaryAction, Menu,
IconButton, MenuItem,
} from "@material-ui/core"; PopoverPosition,
import { FC, MouseEventHandler, useMemo } from "react"; } from "@mui/material";
import { FC, useMemo, useState, MouseEvent } from "react";
import { Pipeline, Project } from "../generated/graphql"; 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 { interface Props {
projectId: string; projectId: string;
@ -22,6 +30,7 @@ const PIPELINES = gql`
id id
name name
branch branch
environment
} }
project(id: $projectId) { project(id: $projectId) {
id id
@ -42,48 +51,142 @@ export const PipelineList: FC<Props> = ({ projectId }) => {
project: data?.project, project: data?.project,
})); }));
}, [data]); }, [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 ( return (
<List> <>
{pipelines?.map((pipeline) => ( <List>
<Link {pipelines?.map((pipeline) => (
name="pipeline-commits" <Link
params={{ pipelineId: pipeline.id, projectId: projectId }} name="pipeline-commits"
key={pipeline.id} 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} /> Runtime Config
</Link> </MenuItem>
))} <MenuItem
</List> onClick={() => {
modify();
handleClose();
}}
>
Pipeline Config
</MenuItem>
<Divider />
<MenuItem sx={{ color: "error.main" }} onClick={handleClose}>
Delete
</MenuItem>
</Menu>
</>
); );
}; };
const Item = ({ pipeline }: { pipeline: Pipeline }) => { 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 ( return (
<ListItem button> <ListItem button>
<ListItemText <ListItemText
primary={pipeline.name} primary={pipeline.name}
secondary={ secondary={
<Typography component="span" variant="body2" color="textSecondary"> <Box sx={{ display: "flex", flexFlow: "column" }}>
<CallMerge fontSize="small" /> <Box
{pipeline.branch} sx={{
</Typography> 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> </ListItem>
); );
}; };

21
src/pipelines/queries.ts
View File

@ -1,4 +1,4 @@
import { gql } from '@apollo/client'; import { gql } from "@apollo/client";
export const PIPELINE = gql` export const PIPELINE = gql`
query Pipeline($id: String!) { query Pipeline($id: String!) {
@ -7,6 +7,7 @@ export const PIPELINE = gql`
name name
projectId projectId
branch branch
environment
workUnitMetadata { workUnitMetadata {
version version
units { 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
}
}
`;

49
src/pipelines/runtime-config-editor.tsx Normal file
View File

@ -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>
);
};

21
src/projects/project-detail.tsx
View File

@ -1,20 +1,13 @@
import { Project } from "../generated/graphql"; import { Project } from "../generated/graphql";
import React, { FC, Fragment } from "react"; import React, { FC, Fragment } from "react";
import { import { IconButton, Grid, Paper, Portal, Typography, Box } from "@mui/material";
IconButton, import makeStyles from '@mui/styles/makeStyles';
Grid,
makeStyles,
Paper,
Portal,
Typography,
Box,
} from "@material-ui/core";
import { useHeaderContainer } from "../layouts"; import { useHeaderContainer } from "../layouts";
import { PipelineList } from "../pipelines/pipeline-list"; 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 { Link } from '@curi/react-dom';
import { Button } from "@material-ui/core"; import { Button } from "@mui/material";
import { AddBox } from "@material-ui/icons"; import { AddBox } from "@mui/icons-material";
interface Props { interface Props {
project: Project; project: Project;
@ -45,7 +38,7 @@ export const ProjectDetail: FC<Props> = ({ project, children }) => {
container container
spacing={3} spacing={3}
direction="row" direction="row"
justify="space-between" justifyContent="space-between"
alignItems="center" alignItems="center"
> >
<Grid item> <Grid item>
@ -58,7 +51,7 @@ export const ProjectDetail: FC<Props> = ({ project, children }) => {
</Grid> </Grid>
<Grid item> <Grid item>
<Link name="edit-project" params={{ projectId: project.id }}> <Link name="edit-project" params={{ projectId: project.id }}>
<IconButton color="inherit">{<Edit />}</IconButton> <IconButton color="inherit" size="large">{<Edit />}</IconButton>
</Link> </Link>
</Grid> </Grid>
</Grid> </Grid>

22
src/projects/project-editor.tsx
View File

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

9
src/projects/project-panel.tsx
View File

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

38
src/routes.tsx
View File

@ -7,13 +7,15 @@ 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 { PipelineEditor } from "./pipelines/pipeline-editor";
import { import {
Configuration,
ConfigurationLanguage,
CreatePipelineInput, CreatePipelineInput,
CreateProjectInput, CreateProjectInput,
Pipeline, Pipeline,
PipelineUnits, PipelineUnits,
Project, Project,
} from "./generated/graphql"; } from "./generated/graphql";
import { PIPELINE } from "./pipelines"; import { CONFIGURATION, PIPELINE, RuntimeConfigEditor } from "./pipelines";
export default prepareRoutes([ export default prepareRoutes([
{ {
@ -108,6 +110,40 @@ export default prepareRoutes([
return resolved; return resolved;
}, },
}, // edit-pipeline }, // 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", name: "project-detail",
path: "projects/:projectId", path: "projects/:projectId",