X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/b62944772ff96019c1e497426784690978bb9c96..0d6ec80f58aa00e9542f4c69cba872016baa14d6:/src/views-components/details-panel/details-panel.tsx

diff --git a/src/views-components/details-panel/details-panel.tsx b/src/views-components/details-panel/details-panel.tsx
index 20d3843f77..c0d4797fa5 100644
--- a/src/views-components/details-panel/details-panel.tsx
+++ b/src/views-components/details-panel/details-panel.tsx
@@ -5,36 +5,41 @@
 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 = 'root' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'headerTitle' | 'tabContainer';
 
 const drawerWidth = 320;
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
-    container: {
+    root: {
         width: 0,
-        position: 'relative',
-        height: 'auto',
+        overflowX: 'hidden',
         transition: 'width 0.5s ease',
-        '&$opened': {
-            width: drawerWidth
-        }
+        background: theme.palette.background.paper,
+        borderLeft: `1px solid ${theme.palette.divider}`,
+        height: '100%',
+    },
+    opened: {
+        width: drawerWidth,
+    },
+    container: {
+        width: drawerWidth,
     },
-    opened: {},
     drawerPaper: {
         position: 'relative',
         width: drawerWidth
@@ -45,7 +50,11 @@ 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
@@ -66,10 +75,13 @@ const getItem = (resource: DetailsResource): DetailsData => {
     }
 };
 
-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: () => {
@@ -105,29 +117,28 @@ export const DetailsPanel = withStyles(styles)(
                 const { classes, onCloseDrawer, isOpened, item } = this.props;
                 const { tabsValue } = this.state;
                 return (
-                    <Typography component="div"
-                                className={classnames([classes.container, { [classes.opened]: isOpened }])}>
-                        <Drawer variant="permanent" anchor="right" classes={{ paper: classes.drawerPaper }}>
-                            <Typography component="div" className={classes.headerContainer}>
+                    <div className={classnames([classes.root, { [classes.opened]: isOpened }])}>
+                        <div className={classes.container}>
+                            <div className={classes.headerContainer}>
                                 <Grid container alignItems='center' justify='space-around'>
                                     <Grid item xs={2}>
                                         {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>
+                            </div>
                             <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">
@@ -135,10 +146,10 @@ export const DetailsPanel = withStyles(styles)(
                                 </Grid>
                             )}
                             {tabsValue === 1 && this.renderTabContainer(
-                                <Grid container direction="column"/>
+                                <Grid container direction="column" />
                             )}
-                        </Drawer>
-                    </Typography>
+                        </div>
+                    </div>
                 );
             }
         }