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

feat(projects, pipeline): project detail page.

Browse Source
This commit is contained in:
Ivan Li 2021-05-05 11:21:48 +08:00
parent ebc3d3a3aa
commit 93482bec3f
11 changed files with 248 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
graphql.schema.json
View File

@ -644,7 +644,7 @@
"deprecationReason": null
},
{
"name": "modifyPipeline",
"name": "updatePipeline",
"description": null,
"args": [
{
@ -662,22 +662,6 @@
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "id",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"type": {
@ -1427,7 +1411,7 @@
"deprecationReason": null
},
{
"name": "listPipelines",
"name": "pipelines",
"description": null,
"args": [
{
@ -1464,7 +1448,7 @@
"deprecationReason": null
},
{
"name": "findPipeline",
"name": "pipeline",
"description": null,
"args": [
{
@ -1790,6 +1774,22 @@
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "id",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"interfaces": null,

14
src/generated/graphql.tsx
View File

@ -66,7 +66,7 @@ export type Mutation = {
updateProject: Project;
removeProject: Scalars['Float'];
createPipeline: Pipeline;
modifyPipeline: Pipeline;
updatePipeline: Pipeline;
deletePipeline: Scalars['Float'];
createPipelineTask: PipelineTask;
};
@ -92,9 +92,8 @@ export type MutationCreatePipelineArgs = {
};
export type MutationModifyPipelineArgs = {
export type MutationUpdatePipelineArgs = {
Pipeline: UpdatePipelineInput;
id: Scalars['String'];
};
@ -171,8 +170,8 @@ export type Query = {
hello: Hello;
projects: Array<Project>;
project: Project;
listPipelines: Array<Pipeline>;
findPipeline: Pipeline;
pipelines: Array<Pipeline>;
pipeline: Pipeline;
listPipelineTaskByPipelineId: Array<PipelineTask>;
findPipelineTask: PipelineTask;
};
@ -183,12 +182,12 @@ export type QueryProjectArgs = {
};
export type QueryListPipelinesArgs = {
export type QueryPipelinesArgs = {
projectId?: Maybe<Scalars['String']>;
};
export type QueryFindPipelineArgs = {
export type QueryPipelineArgs = {
id: Scalars['String'];
};
@ -237,6 +236,7 @@ export type UpdatePipelineInput = {
branch: Scalars['String'];
name: Scalars['String'];
workUnitMetadata: WorkUnitMetadataInput;
id: Scalars['String'];
};
export type UpdateProjectInput = {

132
src/layouts/default.tsx
View File

@ -1,4 +1,4 @@
import React, { FC } from "react";
import React, { FC, useCallback, useRef, useState } from "react";
import clsx from "clsx";
import {
createStyles,
@ -16,13 +16,15 @@ 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";
const drawerWidth = 240;
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
display: "flex",
overflow: "hidden",
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
@ -70,17 +72,24 @@ const useStyles = makeStyles((theme: Theme) =>
alignItems: "center",
justifyContent: "flex-end",
padding: theme.spacing(0, 1),
flex: "none",
// necessary for content to be below app bar
...theme.mixins.toolbar,
},
headerContaner: {
flex: "auto",
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
height: "100vh",
display: "flex",
flexFlow: "column",
padding: theme.spacing(0),
},
})
);
export const DefaultLayout: FC = ({children}) => {
export const DefaultLayout: FC = ({ children }) => {
const classes = useStyles();
const theme = useTheme();
const [open, setOpen] = React.useState(true);
@ -93,62 +102,71 @@ export const DefaultLayout: FC = ({children}) => {
setOpen(false);
};
const [headerContainer, setHeaderContainer] = useState(undefined);
const onRefChange = useCallback(
(node) => {
setHeaderContainer(node);
},
[setHeaderContainer]
);
return (
<div className={classes.root}>
<CssBaseline />
<AppBar
position="fixed"
className={clsx(classes.appBar, {
[classes.appBarShift]: open,
})}
>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
className={clsx(classes.menuButton, {
[classes.hide]: open,
})}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap>
Mini variant drawer
</Typography>
</Toolbar>
</AppBar>
<Drawer
variant="permanent"
className={clsx(classes.drawer, {
<CssBaseline />
<AppBar
position="fixed"
className={clsx(classes.appBar, {
[classes.appBarShift]: open,
})}
>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
className={clsx(classes.menuButton, {
[classes.hide]: open,
})}
>
<MenuIcon />
</IconButton>
<div className={classes.headerContaner} ref={onRefChange}></div>
</Toolbar>
</AppBar>
<Drawer
variant="permanent"
className={clsx(classes.drawer, {
[classes.drawerOpen]: open,
[classes.drawerClose]: !open,
})}
classes={{
paper: clsx({
[classes.drawerOpen]: open,
[classes.drawerClose]: !open,
})}
classes={{
paper: clsx({
[classes.drawerOpen]: open,
[classes.drawerClose]: !open,
}),
}}
>
<div className={classes.toolbar}>
<IconButton onClick={handleDrawerClose}>
{theme.direction === "rtl" ? (
<ChevronRightIcon />
) : (
<ChevronLeftIcon />
)}
</IconButton>
</div>
<Divider />
<ProjectPanel />
<Divider />
</Drawer>
<main className={classes.content}>
<div className={classes.toolbar} />
{ children }
</main>
}),
}}
>
<div className={classes.toolbar}>
<IconButton onClick={handleDrawerClose}>
{theme.direction === "rtl" ? (
<ChevronRightIcon />
) : (
<ChevronLeftIcon />
)}
</IconButton>
</div>
<Divider />
<ProjectPanel />
<Divider />
</Drawer>
<main className={classes.content}>
<div className={classes.toolbar} />
<HeaderContainerProvider value={headerContainer}>
{children}
</HeaderContainerProvider>
</main>
</div>
);
}
};

7
src/layouts/header-container.tsx Normal file
View File

@ -0,0 +1,7 @@
import { createContext, useContext } from 'react';
const Context = createContext<HTMLElement| undefined>(undefined);
export const HeaderContainerProvider = Context.Provider;
export const useHeaderContainer = () => useContext(Context);

3
src/layouts/index.tsx
View File

@ -1 +1,2 @@
export * from './default';
export * from './default';
export * from './header-container';

53
src/pipelines/pipeline-list.tsx Normal file
View File

@ -0,0 +1,53 @@
import { gql, useQuery } from '@apollo/client';
import { Link } from '@curi/react-dom';
import { List, ListItem, Typography, ListItemText } from '@material-ui/core';
import { FC } from 'react';
import { Pipeline } from '../generated/graphql';
import { Fragment } from 'react';
import { CallMerge } from '@material-ui/icons';
interface Props {
projectId: string;
}
const PIPELINES = gql`
query Pipelines($projectId: String!) {
pipelines(projectId: $projectId) {
id
name
branch
}
}
`
export const PipelineList: FC<Props> = ({ projectId }) => {
const {data, loading} = useQuery<{pipelines: Pipeline[]}, {projectId: string}>(PIPELINES, {
variables: {projectId}
})
return (
<List>
{data?.pipelines.map((pipeline) => (
<Link name="pipeline-details" params={{pipelineId: pipeline.id}}>
<Item pipeline={pipeline} key={pipeline.id} />
</Link>
))}
</List>
);
}
const Item = ({pipeline}: {pipeline: Pipeline}) => {
return (
<ListItem button>
<ListItemText
primary={pipeline.name}
secondary={
<Typography component="span" variant="body2" color="textSecondary">
<CallMerge fontSize="small" />
{pipeline.branch}
</Typography>
}
/>
</ListItem>
);
}

4
src/projects/index.ts Normal file
View File

@ -0,0 +1,4 @@
export * from './project-detail';
export * from './project-panel';
export * from './project-editor';
export * from './queries';

59
src/projects/project-detail.tsx Normal file
View File

@ -0,0 +1,59 @@
import { Project } from "../generated/graphql";
import React, { FC, Fragment } from "react";
import { Grid, makeStyles, Paper, Portal, Typography } from "@material-ui/core";
import { useHeaderContainer } from "../layouts";
import { PipelineList } from "../pipelines/pipeline-list";
interface Props {
project: Project;
}
const useStyles = makeStyles(() => ({
root: {
height: "100%",
flex: "auto",
overflow: "hidden"
},
pipelineListContainer: {
height: "100%",
width: "100%",
overflow: "auto"
},
}));
export const ProjectDetail: FC<Props> = ({ project }) => {
const headerContainer = useHeaderContainer();
const classes = useStyles();
return (
<Fragment>
<Portal container={headerContainer}>
<Grid
container
spacing={3}
direction="row"
justify="space-between"
alignItems="center"
>
<Grid item>
<Typography component="h1" variant="h6" noWrap>
{project.name}
</Typography>
<Typography variant="subtitle2" gutterBottom noWrap>
{project.comment}
</Typography>
</Grid>
<Grid item>Options</Grid>
</Grid>
</Portal>
<Grid container spacing={1} direction="row" alignItems="stretch" className={classes.root}>
<Grid item xs={3} style={{height: '100%', display: 'flex'}}>
<Paper className={classes.pipelineListContainer}>
<PipelineList projectId={project.id} />
</Paper>
</Grid>
</Grid>
</Fragment>
);
};

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

@ -3,10 +3,8 @@ import { Button, LinearProgress, makeStyles, Paper } from "@material-ui/core";
import { Form, Formik, Field, FormikHelpers } from "formik";
import { TextField } from "formik-material-ui";
import { not } from "ramda";
import React, { FC } from "react";
import { FC } from "react";
import {
CreateProjectInput,
UpdateProjectInput,
Project,
} from "../generated/graphql";
import * as Yup from "yup";

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

@ -1,7 +1,6 @@
import { gql, useQuery } from '@apollo/client';
import { Link, useRouter } from '@curi/react-dom';
import { Box, List, ListItem } from '@material-ui/core';
import { makeStyles, Theme, createStyles } from '@material-ui/core';
import { find, propEq } from 'ramda';
import React, { useState, FC, useEffect } from 'react';
import { Project } from '../generated/graphql';
@ -22,12 +21,6 @@ const PROJECTS = gql`
}
`;
const useStyles = makeStyles((theme: Theme) =>
createStyles({
})
);
export function ProjectPanel() {
return (
<section>
@ -68,7 +61,7 @@ const ProjectList: FC<{}> = () => {
const items = projects?.map((item) => (
<Link
name="edit-project"
name="project-detail"
params={{ projectId: item.id }}
key={item.id}
onNav={() => setCurrentProject(item)}

29
src/routes.tsx
View File

@ -1,9 +1,9 @@
import { ApolloClient, InMemoryCache } from "@apollo/client";
import { prepareRoutes } from "@curi/router";
import { omit } from 'ramda';
import React from 'react';
import { CreateProjectInput, Project } from './generated/graphql';
import { ProjectEditor } from './projects/project-editor';
import { PROJECT } from './projects/queries';
import { ProjectDetail, ProjectEditor, PROJECT } from "./projects";
export default prepareRoutes([
{
@ -30,7 +30,10 @@ export default prepareRoutes([
{
name: "edit-project",
path: "projects/:projectId/edit",
async resolve(matched, { client }: { client: ApolloClient<InMemoryCache> }) {
async resolve(
matched,
{ client }: { client: ApolloClient<InMemoryCache> }
) {
const { data } = await client.query<{ project: Project }>({
query: PROJECT,
variables: { id: matched?.params.projectId },
@ -48,14 +51,22 @@ export default prepareRoutes([
{
name: "project-detail",
path: "projects/:projectId",
resolve() {
const body = import(
/* webpackChunkName: "article-editor" */ "./projects/project-panel"
).then((m) => m.ProjectPanel);
return body;
async resolve(
matched,
{ client }: { client: ApolloClient<InMemoryCache> }
) {
const { data } = await client.query<{ project: Project }>({
query: PROJECT,
variables: { id: matched?.params.projectId },
});
return {
body: () => (
<ProjectDetail project={omit(["__typename"], data.project)} />
),
};
},
respond({ resolved }) {
return { body: resolved };
return resolved;
},
},
]);