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

chore: migration mui v4 -> v5.

Browse Source
This commit is contained in:
Ivan Li 2021-10-01 01:19:55 +08:00
parent 5f024f6028
commit 60d7d7fe5c
17 changed files with 1190 additions and 604 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1108
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

11
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",
"@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",
"@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",

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

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

@ -1,28 +1,31 @@
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: { debugger;
height: "300px", return {
width: "500px", iframe: {
position: "absolute", height: "300px",
top: "100px", width: "500px",
left: "50%", position: "absolute",
transform: "translateX(-50%)", top: "100px",
zIndex: theme.zIndex.modal, left: "50%",
border: "none", transform: "translateX(-50%)",
boxShadow: theme.shadows[4], zIndex: theme.zIndex.modal,
}, border: "none",
mask: { boxShadow: theme.shadows[4],
top: "0", },
left: "0", mask: {
bottom: "0", top: "0",
right: "0", left: "0",
position: "absolute", bottom: "0",
backgroundColor: "rgba(0, 0, 0, 0.3)", right: "0",
zIndex: theme.zIndex.modal, position: "absolute",
}, 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}) => {

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();

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

@ -167,178 +167,6 @@
"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",
@ -1016,39 +844,6 @@
}, },
"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,
@ -1183,6 +978,16 @@
"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",
@ -1978,59 +1783,6 @@
}, },
"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,
@ -2038,81 +1790,6 @@
"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,23 +26,6 @@ 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'];
@ -92,7 +75,6 @@ export type Mutation = {
deletePipeline: Scalars['Float']; deletePipeline: Scalars['Float'];
createPipelineTask: PipelineTask; createPipelineTask: PipelineTask;
stopPipelineTask: Scalars['Boolean']; stopPipelineTask: Scalars['Boolean'];
setConfiguration: Configuration;
}; };
@ -135,11 +117,6 @@ 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'];
@ -214,7 +191,6 @@ export type Query = {
commits?: Maybe<Array<Commit>>; commits?: Maybe<Array<Commit>>;
listPipelineTaskByPipelineId: Array<PipelineTask>; listPipelineTaskByPipelineId: Array<PipelineTask>;
pipelineTask: PipelineTask; pipelineTask: PipelineTask;
getConfiguration: Configuration;
}; };
@ -247,20 +223,6 @@ 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,28 +5,44 @@ 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>
<SnackbarProvider maxSnack={5}> <StyledEngineProvider injectFirst>
<AuthProvider> <ThemeProvider theme={theme}>
<AppApolloClientProvider> <SnackbarProvider maxSnack={5}>
<MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}> <AuthProvider>
<Router> <AppApolloClientProvider>
<App /> <LocalizationProvider dateAdapter={AdapterDateFns}>
</Router> <Router>
</MuiPickersUtilsProvider> <App />
</AppApolloClientProvider> </Router>
</AuthProvider> </LocalizationProvider>
</SnackbarProvider> </AppApolloClientProvider>
</AuthProvider>
</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";

22
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";
@ -176,16 +168,12 @@ 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>
{isCreate ? null : ( {isCreate ? null : (
<IconButton <IconButton color="inherit" onClick={handleDelete} disabled={deleting} size="large">
color="inherit"
onClick={handleDelete}
disabled={deleting}
>
<Delete /> <Delete />
</IconButton> </IconButton>
)} )}

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

@ -7,10 +7,14 @@ import {
ListItemText, ListItemText,
ListItemSecondaryAction, ListItemSecondaryAction,
IconButton, IconButton,
} from "@material-ui/core"; Menu,
import { FC, MouseEventHandler, useMemo } from "react"; MenuItem,
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 "@material-ui/icons"; import { CallMerge, Edit } from "@mui/icons-material";
import { any, values } from "ramda";
interface Props { interface Props {
projectId: string; projectId: string;
@ -42,18 +46,49 @@ 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> <>
{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}
<Item pipeline={pipeline} /> onContextMenu={handleContextMenu}
</Link> >
))} <Item pipeline={pipeline} />
</List> </Link>
))}
</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>
</>
); );
}; };
@ -80,7 +115,7 @@ const Item = ({ pipeline }: { pipeline: Pipeline }) => {
} }
/> />
<ListItemSecondaryAction> <ListItemSecondaryAction>
<IconButton edge="end" aria-label="edit" onClick={modify}> <IconButton edge="end" aria-label="edit" onClick={modify} size="large">
<Edit /> <Edit />
</IconButton> </IconButton>
</ListItemSecondaryAction> </ListItemSecondaryAction>

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`