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

Compare commits

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

No commits in common. "60d7d7fe5cba8a4446fa2a79c940f3e641069e67" and "5ea803c8a4ec08b08cf351ed992bff55b201887f" have entirely different histories.
60d7d7fe5c ... 5ea803c8a4

17 changed files with 10451 additions and 12345 deletions
Show Stats Expand all files Collapse all files

22108
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

13
package.json
View File

@ -7,16 +7,15 @@
"@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",
"@emotion/react": "^11.4.1", "@date-io/date-fns": "^1.3.13",
"@emotion/styled": "^11.3.0",
"@fortawesome/fontawesome-svg-core": "^1.2.35", "@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-solid-svg-icons": "^5.15.3", "@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14", "@fortawesome/react-fontawesome": "^0.1.14",
"@hickory/browser": "^2.1.0", "@hickory/browser": "^2.1.0",
"@mui/icons-material": "^5.0.1", "@material-ui/core": "^4.11.3",
"@mui/lab": "^5.0.0-alpha.49", "@material-ui/icons": "^4.11.2",
"@mui/material": "^5.0.2", "@material-ui/lab": "*",
"@mui/styles": "^5.0.1", "@material-ui/pickers": "^3.3.10",
"@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",
@ -45,7 +44,7 @@
"yup": "^0.32.9" "yup": "^0.32.9"
}, },
"scripts": { "scripts": {
"start": "BROWSER=none PORT=auto craco start", "start": "BROWSER=none craco start",
"build": "craco build", "build": "craco build",
"test": "craco test", "test": "craco test",
"prestart": "npm run graphql", "prestart": "npm run graphql",

4
src/App.tsx
View File

@ -3,9 +3,9 @@ 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;
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,
} from "@mui/material"; withStyles,
import { makeStyles } from "@mui/styles"; } from "@material-ui/core";
import withStyles from "@mui/styles/withStyles";
import { import {
Cancel, Cancel,
CheckCircle, CheckCircle,
@ -24,7 +24,7 @@ import {
ShoppingCart, ShoppingCart,
Stop, Stop,
Timer, Timer,
} from "@mui/icons-material"; } from "@material-ui/icons";
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,10 +133,11 @@ const Item: FC<{ commit: Commit; pipeline: Pipeline }> = ({
}) => { }) => {
const [isOpen, setOpen] = useState(() => false); const [isOpen, setOpen] = useState(() => false);
const [createTask, { loading }] = useMutation< const [createTask, { loading }] =
{ createPipelineTask: PipelineTask }, useMutation<
{ task: CreatePipelineTaskInput } { createPipelineTask: PipelineTask },
>(CREATE_PIPELINE_TASK); { task: CreatePipelineTaskInput }
>(CREATE_PIPELINE_TASK);
const units = useMemo( const units = useMemo(
() => pipeline.workUnitMetadata.units.map((unit) => unit.type), () => pipeline.workUnitMetadata.units.map((unit) => unit.type),
@ -180,7 +181,6 @@ 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} size="large"> <IconButton edge="end" aria-label="stop" onClick={stop}>
<Stop /> <Stop />
</IconButton> </IconButton>
)} )}

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

@ -1,31 +1,28 @@
import makeStyles from "@mui/styles/makeStyles"; import { makeStyles } from "@material-ui/core";
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) => ({
debugger; 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 '@mui/material'; import { Typography } from '@material-ui/core';
import React, { FC } from 'react'; import React, { FC } from 'react';
export const ErrorPage: FC = ({children}) => { export const ErrorPage: FC = ({children}) => {

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 "@mui/material"; import { LinearProgress } from "@material-ui/core";
const Component: FC = ({ children }) => { const Component: FC = ({ children }) => {
const client = useApolloClient(); const client = useApolloClient();

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

@ -167,6 +167,178 @@
"enumValues": null, "enumValues": null,
"possibleTypes": 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", "kind": "INPUT_OBJECT",
"name": "CreatePipelineInput", "name": "CreatePipelineInput",
@ -844,6 +1016,39 @@
}, },
"isDeprecated": false, "isDeprecated": false,
"deprecationReason": null "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, "inputFields": null,
@ -978,16 +1183,6 @@
"enumValues": null, "enumValues": null,
"possibleTypes": 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", "kind": "OBJECT",
"name": "PipelineTask", "name": "PipelineTask",
@ -1783,6 +1978,59 @@
}, },
"isDeprecated": false, "isDeprecated": false,
"deprecationReason": null "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": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "Configuration",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
} }
], ],
"inputFields": null, "inputFields": null,
@ -1790,6 +2038,81 @@
"enumValues": null, "enumValues": null,
"possibleTypes": null "possibleTypes": null
}, },
{
"kind": "INPUT_OBJECT",
"name": "SetConfigurationInput",
"description": null,
"fields": null,
"inputFields": [
{
"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
}
],
"interfaces": null,
"enumValues": null,
"possibleTypes": null
},
{ {
"kind": "OBJECT", "kind": "OBJECT",
"name": "Subscription", "name": "Subscription",

38
src/generated/graphql.tsx
View File

@ -26,6 +26,23 @@ export type Commit = {
tasks: Array<PipelineTask>; 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 = { export type CreatePipelineInput = {
projectId: Scalars['String']; projectId: Scalars['String'];
branch: Scalars['String']; branch: Scalars['String'];
@ -75,6 +92,7 @@ export type Mutation = {
deletePipeline: Scalars['Float']; deletePipeline: Scalars['Float'];
createPipelineTask: PipelineTask; createPipelineTask: PipelineTask;
stopPipelineTask: Scalars['Boolean']; stopPipelineTask: Scalars['Boolean'];
setConfiguration: Configuration;
}; };
@ -117,6 +135,11 @@ export type MutationStopPipelineTaskArgs = {
id: Scalars['String']; id: Scalars['String'];
}; };
export type MutationSetConfigurationArgs = {
setConfigurationInput: SetConfigurationInput;
};
export type Pipeline = { export type Pipeline = {
__typename?: 'Pipeline'; __typename?: 'Pipeline';
id: Scalars['ID']; id: Scalars['ID'];
@ -191,6 +214,7 @@ export type Query = {
commits?: Maybe<Array<Commit>>; commits?: Maybe<Array<Commit>>;
listPipelineTaskByPipelineId: Array<PipelineTask>; listPipelineTaskByPipelineId: Array<PipelineTask>;
pipelineTask: PipelineTask; pipelineTask: PipelineTask;
getConfiguration: Configuration;
}; };
@ -223,6 +247,20 @@ export type QueryPipelineTaskArgs = {
id: Scalars['String']; id: Scalars['String'];
}; };
export type QueryGetConfigurationArgs = {
pipelineId?: Maybe<Scalars['String']>;
projectId?: Maybe<Scalars['String']>;
id?: Maybe<Scalars['String']>;
};
export type SetConfigurationInput = {
pipelineId: Scalars['String'];
projectId: Scalars['String'];
content: Scalars['String'];
language: ConfigurationLanguage;
};
export type Subscription = { export type Subscription = {
__typename?: 'Subscription'; __typename?: 'Subscription';
syncCommits?: Maybe<Scalars['String']>; syncCommits?: Maybe<Scalars['String']>;

44
src/index.tsx
View File

@ -5,44 +5,28 @@ 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 { LocalizationProvider } from "@mui/lab";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
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();
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <React.StrictMode>
<ConfirmProvider> <ConfirmProvider>
<StyledEngineProvider injectFirst> <SnackbarProvider maxSnack={5}>
<ThemeProvider theme={theme}> <AuthProvider>
<SnackbarProvider maxSnack={5}> <AppApolloClientProvider>
<AuthProvider> <MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
<AppApolloClientProvider> <Router>
<LocalizationProvider dateAdapter={AdapterDateFns}> <App />
<Router> </Router>
<App /> </MuiPickersUtilsProvider>
</Router> </AppApolloClientProvider>
</LocalizationProvider> </AuthProvider>
</AppApolloClientProvider> </SnackbarProvider>
</AuthProvider>
</SnackbarProvider>
</ThemeProvider>
</StyledEngineProvider>
</ConfirmProvider> </ConfirmProvider>
</React.StrictMode>, </React.StrictMode>,
document.getElementById("root") document.getElementById("root")

31
src/layouts/default.tsx
View File

@ -1,17 +1,20 @@
import React, { FC, useCallback, useState } from "react"; import React, { FC, useCallback, useState } from "react";
import clsx from "clsx"; import clsx from "clsx";
import { useTheme, Theme } from "@mui/material/styles"; import {
import createStyles from '@mui/styles/createStyles'; createStyles,
import makeStyles from '@mui/styles/makeStyles'; makeStyles,
import Drawer from "@mui/material/Drawer"; useTheme,
import AppBar from "@mui/material/AppBar"; Theme,
import Toolbar from "@mui/material/Toolbar"; } from "@material-ui/core/styles";
import CssBaseline from "@mui/material/CssBaseline"; import Drawer from "@material-ui/core/Drawer";
import Divider from "@mui/material/Divider"; import AppBar from "@material-ui/core/AppBar";
import IconButton from "@mui/material/IconButton"; import Toolbar from "@material-ui/core/Toolbar";
import MenuIcon from "@mui/icons-material/Menu"; import CssBaseline from "@material-ui/core/CssBaseline";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; import Divider from "@material-ui/core/Divider";
import ChevronRightIcon from "@mui/icons-material/ChevronRight"; 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 { 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;
@ -124,7 +127,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>
@ -144,7 +147,7 @@ export const DefaultLayout: FC = ({ children }) => {
}} }}
> >
<div className={classes.toolbar}> <div className={classes.toolbar}>
<IconButton onClick={handleDrawerClose} size="large"> <IconButton onClick={handleDrawerClose}>
{theme.direction === "rtl" ? ( {theme.direction === "rtl" ? (
<ChevronRightIcon /> <ChevronRightIcon />
) : ( ) : (

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

@ -1,6 +1,5 @@
import { gql, useQuery, useSubscription } from "@apollo/client"; import { gql, useQuery, useSubscription } from "@apollo/client";
import { LinearProgress, Typography } from "@mui/material"; import { LinearProgress, makeStyles, Typography } from "@material-ui/core";
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";

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

@ -1,8 +1,16 @@
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 { Button, Grid, IconButton, LinearProgress, Paper, Portal, Typography } from "@mui/material"; import {
import makeStyles from '@mui/styles/makeStyles'; Button,
import { Delete } from "@mui/icons-material"; Grid,
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";
@ -168,12 +176,16 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
return ( return (
<Paper className={classes.root}> <Paper className={classes.root}>
<Portal container={headerContainer}> <Portal container={headerContainer}>
<Grid container justifyContent="space-between" alignItems="center"> <Grid container justify="space-between" alignItems="center">
<Typography variant="h6" component="h1"> <Typography variant="h6" component="h1">
{isCreate ? "Create" : "Edit"} Pipeline {isCreate ? "Create" : "Edit"} Pipeline
</Typography> </Typography>
{isCreate ? null : ( {isCreate ? null : (
<IconButton color="inherit" onClick={handleDelete} disabled={deleting} size="large"> <IconButton
color="inherit"
onClick={handleDelete}
disabled={deleting}
>
<Delete /> <Delete />
</IconButton> </IconButton>
)} )}

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

@ -7,14 +7,10 @@ import {
ListItemText, ListItemText,
ListItemSecondaryAction, ListItemSecondaryAction,
IconButton, IconButton,
Menu, } from "@material-ui/core";
MenuItem, import { FC, MouseEventHandler, useMemo } from "react";
PopoverPosition,
} from "@mui/material";
import { FC, MouseEventHandler, useMemo, useState } from "react";
import { Pipeline, Project } from "../generated/graphql"; import { Pipeline, Project } from "../generated/graphql";
import { CallMerge, Edit } from "@mui/icons-material"; import { CallMerge, Edit } from "@material-ui/icons";
import { any, values } from "ramda";
interface Props { interface Props {
projectId: string; projectId: string;
@ -46,49 +42,18 @@ export const PipelineList: FC<Props> = ({ projectId }) => {
project: data?.project, project: data?.project,
})); }));
}, [data]); }, [data]);
const [contextMenu, setContextMenu] = useState<PopoverPosition>();
const handleContextMenu: MouseEventHandler = (event) => {
event.preventDefault();
setContextMenu({ top: event.clientY - 4, left: event.clientX - 2 });
};
const handleClose = () => {
setContextMenu(undefined);
};
return ( return (
<> <List>
<List> {pipelines?.map((pipeline) => (
{pipelines?.map((pipeline) => ( <Link
<Link name="pipeline-commits"
name="pipeline-commits" params={{ pipelineId: pipeline.id, projectId: projectId }}
params={{ pipelineId: pipeline.id, projectId: projectId }} key={pipeline.id}
key={pipeline.id} >
onContextMenu={handleContextMenu} <Item pipeline={pipeline} />
> </Link>
<Item pipeline={pipeline} /> ))}
</Link> </List>
))}
</List>
<Menu
keepMounted
open={!!contextMenu}
onClose={handleClose}
anchorReference="anchorPosition"
anchorPosition={
contextMenu && any(Boolean, values(contextMenu))
? contextMenu
: undefined
}
>
<MenuItem onClick={handleClose}>Copy</MenuItem>
<MenuItem onClick={handleClose}>Print</MenuItem>
<MenuItem onClick={handleClose}>Highlight</MenuItem>
<MenuItem onClick={handleClose}>Email</MenuItem>
</Menu>
</>
); );
}; };
@ -115,7 +80,7 @@ const Item = ({ pipeline }: { pipeline: Pipeline }) => {
} }
/> />
<ListItemSecondaryAction> <ListItemSecondaryAction>
<IconButton edge="end" aria-label="edit" onClick={modify} size="large"> <IconButton edge="end" aria-label="edit" onClick={modify}>
<Edit /> <Edit />
</IconButton> </IconButton>
</ListItemSecondaryAction> </ListItemSecondaryAction>

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

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

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

@ -1,6 +1,14 @@
import { gql, Reference, useMutation } from "@apollo/client"; import { gql, Reference, useMutation } from "@apollo/client";
import { Button, LinearProgress, Paper, Portal, Typography, Grid, IconButton } from "@mui/material"; import {
import makeStyles from '@mui/styles/makeStyles'; Button,
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";
@ -9,7 +17,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 "@mui/icons-material/Delete"; import DeleteIcon from "@material-ui/icons/Delete";
import { useConfirm } from "material-ui-confirm"; import { useConfirm } from "material-ui-confirm";
import { useSnackbar } from "notistack"; import { useSnackbar } from "notistack";
@ -170,12 +178,16 @@ export const ProjectEditor: FC<Props> = ({ project }) => {
return ( return (
<Paper className={classes.root}> <Paper className={classes.root}>
<Portal container={headerContainer}> <Portal container={headerContainer}>
<Grid container justifyContent="space-between" alignItems="center"> <Grid container justify="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 color="inherit" onClick={handleDelete} disabled={deleting} size="large"> <IconButton
color="inherit"
onClick={handleDelete}
disabled={deleting}
>
<DeleteIcon /> <DeleteIcon />
</IconButton> </IconButton>
)} )}

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

@ -1,12 +1,11 @@
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, Theme } from "@mui/material"; import { Box, List, ListItem, makeStyles, Theme } from "@material-ui/core";
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 "@mui/material"; import { ListItemText } from "@material-ui/core";
import { Button } from "@mui/material"; import { Button } from "@material-ui/core";
import { AddBox } from "@mui/icons-material"; import { AddBox } from "@material-ui/icons";
import { ActiveLink } from "../commons/route/active-link"; import { ActiveLink } from "../commons/route/active-link";
const PROJECTS = gql` const PROJECTS = gql`