Skip to content

Commit

Permalink
xchem#16 share snapshots of projects
Browse files Browse the repository at this point in the history
  • Loading branch information
@tibor-postek-m2ms
tibor-postek-m2ms committed Apr 15, 2020
1 parent b6a5d3a commit 1822f2b
Show file tree
Hide file tree
Showing 7 changed files with 144 additions and 305 deletions.
2 changes: 0 additions & 2 deletions js/components/preview/Preview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { CompoundList } from './compounds/compoundList';
import { ViewerControls } from './viewerControls';
import { ComputeSize } from '../../utils/computeSize';
import { withUpdatingTarget } from '../target/withUpdatingTarget';
import ModalStateSave from '../snapshot/modals/modalStateSave';
import { VIEWS } from '../../constants/constants';
import { withLoadingProtein } from './withLoadingProtein';
import { withSnapshotManagement } from '../snapshot/withSnapshotManagement';
Expand Down Expand Up @@ -155,7 +154,6 @@ const Preview = memo(({ isStateLoaded, hideProjects }) => {
<HotspotList />
</Grid>*/}
</Grid>
<ModalStateSave />
<NewSnapshotModal />
{!hideProjects && <ProjectDetailDrawer showHistory={showHistory} setShowHistory={setShowHistory} />}
</>
Expand Down
159 changes: 86 additions & 73 deletions js/components/preview/projectHistory/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import { useHistory, useRouteMatch } from 'react-router-dom';
import { URLS } from '../../routes/constants';
import { loadSnapshotTree } from '../../projects/redux/dispatchActions';
import palette from '../../../theme/palette';
import { ModalStateSave } from '../../snapshot/modals/modalStateSave';
import { setSharedSnapshotURL } from '../../snapshot/redux/actions';

export const heightOfProjectHistory = '164px';

Expand Down Expand Up @@ -133,78 +135,89 @@ export const ProjectHistory = memo(({ setHeight, showFullHistory }) => {
}, [currentSnapshotID, dispatch, projectId, snapshotId]);

return (
<Panel
ref={ref}
hasHeader
title="Project History"
headerActions={[
<Button color="inherit" variant="text" size="small" disabled startIcon={<Share />}>
Share
</Button>,
<Button color="inherit" variant="text" size="small" onClick={showFullHistory} startIcon={<MergeType />}>
Detail
</Button>
]}
hasExpansion
defaultExpanded
onExpandChange={expand => {
if (ref.current && setHeight instanceof Function) {
setHeight(ref.current.offsetHeight);
}
}}
>
<div className={classes.containerExpanded}>
{isLoadingTree === false &&
currentSnapshotTree !== null &&
currentSnapshotTree.children !== null &&
currentSnapshotTree.title !== null &&
currentSnapshotTree.id !== null &&
currentSnapshotID !== null &&
currentSnapshotList !== null && (
<Gitgraph options={options}>
{gitgraph => {
const initBranch = gitgraph.branch(currentSnapshotTree.title);

initBranch.commit(
commitFunction({
title: currentSnapshotTree.title || '',
hash: currentSnapshotTree.id,
isSelected: currentSnapshotID === currentSnapshotTree.id
})
);

currentSnapshotTree.children.forEach(childID => {
renderTreeNode(childID, gitgraph, initBranch);
});
}}
</Gitgraph>
)}
</div>
{/*<Grid item>*/}
{/* <Table>*/}
{/* <TableHead>*/}
{/* <TableRow>*/}
{/* <TableCell>Title</TableCell>*/}
{/* <TableCell align="right">Author</TableCell>*/}
{/* <TableCell align="right">Created</TableCell>*/}
{/* </TableRow>*/}
{/* </TableHead>*/}
{/* <TableBody>*/}
{/* <TableRow>*/}
{/* <TableCell component="th" scope="row">*/}
{/* {snapshotDetail.name}*/}
{/* </TableCell>*/}
{/* <TableCell align="right">*/}
{/* {snapshotDetail.author && snapshotDetail.author.username},*/}
{/* {snapshotDetail.author && snapshotDetail.author.email}*/}
{/* </TableCell>*/}
{/* <TableCell align="right">*/}
{/* {snapshotDetail.created && moment(snapshotDetail.created).format('LLL')}*/}
{/* </TableCell>*/}
{/* </TableRow>*/}
{/* </TableBody>*/}
{/* </Table>*/}
{/*</Grid>*/}
</Panel>
<>
<Panel
ref={ref}
hasHeader
title="Project History"
headerActions={[
<Button
color="inherit"
variant="text"
size="small"
startIcon={<Share />}
onClick={() => {
dispatch(setSharedSnapshotURL(window.location.href));
}}
>
Share
</Button>,
<Button color="inherit" variant="text" size="small" onClick={showFullHistory} startIcon={<MergeType />}>
Detail
</Button>
]}
hasExpansion
defaultExpanded
onExpandChange={expand => {
if (ref.current && setHeight instanceof Function) {
setHeight(ref.current.offsetHeight);
}
}}
>
<div className={classes.containerExpanded}>
{isLoadingTree === false &&
currentSnapshotTree !== null &&
currentSnapshotTree.children !== null &&
currentSnapshotTree.title !== null &&
currentSnapshotTree.id !== null &&
currentSnapshotID !== null &&
currentSnapshotList !== null && (
<Gitgraph options={options}>
{gitgraph => {
const initBranch = gitgraph.branch(currentSnapshotTree.title);

initBranch.commit(
commitFunction({
title: currentSnapshotTree.title || '',
hash: currentSnapshotTree.id,
isSelected: currentSnapshotID === currentSnapshotTree.id
})
);

currentSnapshotTree.children.forEach(childID => {
renderTreeNode(childID, gitgraph, initBranch);
});
}}
</Gitgraph>
)}
</div>
{/*<Grid item>*/}
{/* <Table>*/}
{/* <TableHead>*/}
{/* <TableRow>*/}
{/* <TableCell>Title</TableCell>*/}
{/* <TableCell align="right">Author</TableCell>*/}
{/* <TableCell align="right">Created</TableCell>*/}
{/* </TableRow>*/}
{/* </TableHead>*/}
{/* <TableBody>*/}
{/* <TableRow>*/}
{/* <TableCell component="th" scope="row">*/}
{/* {snapshotDetail.name}*/}
{/* </TableCell>*/}
{/* <TableCell align="right">*/}
{/* {snapshotDetail.author && snapshotDetail.author.username},*/}
{/* {snapshotDetail.author && snapshotDetail.author.email}*/}
{/* </TableCell>*/}
{/* <TableCell align="right">*/}
{/* {snapshotDetail.created && moment(snapshotDetail.created).format('LLL')}*/}
{/* </TableCell>*/}
{/* </TableRow>*/}
{/* </TableBody>*/}
{/* </Table>*/}
{/*</Grid>*/}
</Panel>
<ModalStateSave />
</>
);
});
14 changes: 11 additions & 3 deletions js/components/projects/projectDetailDrawer/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@ import React, { memo } from 'react';
import { IconButton, makeStyles, Drawer, Typography, Grid } from '@material-ui/core';
import { Delete, Share, Close } from '@material-ui/icons';
import { Gitgraph, templateExtend, TemplateName } from '@gitgraph/react';
import { URLS } from '../../routes/constants';
import { base_url, URLS } from '../../routes/constants';
import moment from 'moment';
import Modal from '../../common/Modal';
import { useSelector } from 'react-redux';
import { useDispatch, useSelector } from 'react-redux';
import { useHistory, useRouteMatch } from 'react-router-dom';
import palette from '../../../theme/palette';
import { setSharedSnapshotURL } from '../../snapshot/redux/actions';

const useStyles = makeStyles(theme => ({
drawer: {
Expand Down Expand Up @@ -72,7 +73,9 @@ export const ProjectDetailDrawer = memo(({ showHistory, setShowHistory }) => {
const classes = useStyles();
let history = useHistory();
let match = useRouteMatch();
const dispatch = useDispatch();
const projectId = match && match.params && match.params.projectId;
const currentProjectID = useSelector(state => state.projectReducers.currentProject.projectID);
const currentSnapshotID = useSelector(state => state.projectReducers.currentSnapshot.id);
const currentSnapshotList = useSelector(state => state.projectReducers.currentSnapshotList);
const currentSnapshotTree = useSelector(state => state.projectReducers.currentSnapshotTree);
Expand All @@ -97,7 +100,12 @@ export const ProjectDetailDrawer = memo(({ showHistory, setShowHistory }) => {
<b>{`${moment().format('LLL')}, ${email}: `}</b>
{description}
</Typography>
<IconButton disabled>
<IconButton
disabled={!currentProjectID || !hash}
onClick={() => {
dispatch(setSharedSnapshotURL(`${base_url}${URLS.projects}${currentProjectID}/${hash}`));
}}
>
<Share />
</IconButton>
</>
Expand Down
Loading

0 comments on commit 1822f2b

Please sign in to comment.