102 lines
2.5 KiB
TypeScript
102 lines
2.5 KiB
TypeScript
import { Project } from "../generated/graphql";
|
|
import React, { FC, Fragment } from "react";
|
|
import {
|
|
IconButton,
|
|
Grid,
|
|
makeStyles,
|
|
Paper,
|
|
Portal,
|
|
Typography,
|
|
Box,
|
|
} from "@material-ui/core";
|
|
import { useHeaderContainer } from "../layouts";
|
|
import { PipelineList } from "../pipelines/pipeline-list";
|
|
import { Edit } from '@material-ui/icons';
|
|
import { Link } from '@curi/react-dom';
|
|
import { Button } from "@material-ui/core";
|
|
import { AddBox } from "@material-ui/icons";
|
|
|
|
interface Props {
|
|
project: Project;
|
|
}
|
|
|
|
const useStyles = makeStyles(() => ({
|
|
root: {
|
|
height: "100%",
|
|
flex: "auto",
|
|
overflow: "hidden"
|
|
},
|
|
pipelineListContainer: {
|
|
height: "100%",
|
|
width: "100%",
|
|
overflow: "auto"
|
|
},
|
|
}));
|
|
|
|
export const ProjectDetail: FC<Props> = ({ project, children }) => {
|
|
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>
|
|
<Link name="edit-project" params={{ projectId: project.id }}>
|
|
<IconButton color="inherit">{<Edit />}</IconButton>
|
|
</Link>
|
|
</Grid>
|
|
</Grid>
|
|
</Portal>
|
|
<Grid
|
|
container
|
|
spacing={0}
|
|
direction="row"
|
|
alignItems="stretch"
|
|
className={classes.root}
|
|
>
|
|
<Grid item xs={3} lg={2} style={{ height: "100%", display: "flex" }}>
|
|
<Paper className={classes.pipelineListContainer}>
|
|
<Box m={2}>
|
|
<Link name="create-pipeline" params={{ projectId: project.id }}>
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
title="New Pipeline"
|
|
startIcon={<AddBox />}
|
|
>
|
|
New Pipeline
|
|
</Button>
|
|
</Link>
|
|
</Box>
|
|
<PipelineList projectId={project.id} />
|
|
</Paper>
|
|
</Grid>
|
|
<Grid
|
|
item
|
|
xs={9}
|
|
lg={10}
|
|
style={{ height: "100%", display: "flex", overflowY: "auto" }}
|
|
>
|
|
{children}
|
|
</Grid>
|
|
</Grid>
|
|
</Fragment>
|
|
);
|
|
};
|