import * as React from 'react';
import { Drawer, IconButton, Tabs, Tab, Typography, Grid } from '@material-ui/core';
import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
-import { ArvadosTheme } from '../../common/custom-theme';
+import { ArvadosTheme } from '~/common/custom-theme';
import * as classnames from "classnames";
import { connect } from 'react-redux';
-import { RootState } from '../../store/store';
-import { detailsPanelActions } from "../../store/details-panel/details-panel-action";
-import { CloseIcon } from '../../components/icon/icon';
-import { EmptyResource } from '../../models/empty';
+import { RootState } from '~/store/store';
+import { detailsPanelActions } from "~/store/details-panel/details-panel-action";
+import { CloseIcon } from '~/components/icon/icon';
+import { EmptyResource } from '~/models/empty';
import { Dispatch } from "redux";
-import { ResourceKind } from "../../models/resource";
+import { ResourceKind } from "~/models/resource";
import { ProjectDetails } from "./project-details";
import { CollectionDetails } from "./collection-details";
import { ProcessDetails } from "./process-details";
import { EmptyDetails } from "./empty-details";
import { DetailsData } from "./details-data";
-import { DetailsResource } from "../../models/details";
+import { DetailsResource } from "~/models/details";
+import { getResource } from '../../store/resources/resources';
-type CssRules = 'drawerPaper' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'tabContainer';
+type CssRules = 'drawerPaper' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'headerTitle' | 'tabContainer';
const drawerWidth = 320;
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
textAlign: 'center'
},
headerIcon: {
- fontSize: "34px"
+ fontSize: '2.125rem'
+ },
+ headerTitle: {
+ overflowWrap: 'break-word',
+ wordWrap: 'break-word'
},
tabContainer: {
padding: theme.spacing.unit * 3
const getItem = (resource: DetailsResource): DetailsData => {
const res = resource || { kind: undefined, name: 'Projects' };
switch (res.kind) {
- case ResourceKind.Project:
+ case ResourceKind.PROJECT:
return new ProjectDetails(res);
- case ResourceKind.Collection:
+ case ResourceKind.COLLECTION:
return new CollectionDetails(res);
- case ResourceKind.Process:
+ case ResourceKind.PROCESS:
return new ProcessDetails(res);
default:
return new EmptyDetails(res as EmptyResource);
}
};
-const mapStateToProps = ({ detailsPanel }: RootState) => ({
- isOpened: detailsPanel.isOpened,
- item: getItem(detailsPanel.item as DetailsResource)
-});
+const mapStateToProps = ({ detailsPanel, resources }: RootState) => {
+ const resource = getResource(detailsPanel.resourceUuid)(resources) as DetailsResource;
+ return {
+ isOpened: detailsPanel.isOpened,
+ item: getItem(resource)
+ };
+};
const mapDispatchToProps = (dispatch: Dispatch) => ({
onCloseDrawer: () => {
const { tabsValue } = this.state;
return (
<Typography component="div"
- className={classnames([classes.container, { [classes.opened]: isOpened }])}>
+ className={classnames([classes.container, { [classes.opened]: isOpened }])}>
<Drawer variant="permanent" anchor="right" classes={{ paper: classes.drawerPaper }}>
<Typography component="div" className={classes.headerContainer}>
<Grid container alignItems='center' justify='space-around'>
{item.getIcon(classes.headerIcon)}
</Grid>
<Grid item xs={8}>
- <Typography variant="title">
+ <Typography variant="title" className={classes.headerTitle}>
{item.getTitle()}
</Typography>
</Grid>
<Grid item>
<IconButton color="inherit" onClick={onCloseDrawer}>
- {<CloseIcon/>}
+ {<CloseIcon />}
</IconButton>
</Grid>
</Grid>
</Typography>
<Tabs value={tabsValue} onChange={this.handleChange}>
- <Tab disableRipple label="Details"/>
- <Tab disableRipple label="Activity" disabled/>
+ <Tab disableRipple label="Details" />
+ <Tab disableRipple label="Activity" disabled />
</Tabs>
{tabsValue === 0 && this.renderTabContainer(
<Grid container direction="column">
</Grid>
)}
{tabsValue === 1 && this.renderTabContainer(
- <Grid container direction="column"/>
+ <Grid container direction="column" />
)}
</Drawer>
</Typography>