X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/ce19ce10f479c168f72003495696fdd0f01ecc52..2ef3823ee2205b76af73f3fa4440395bdb3aac5d:/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 113cf096..f4aaa843 100644
--- a/src/views-components/details-panel/details-panel.tsx
+++ b/src/views-components/details-panel/details-panel.tsx
@@ -10,7 +10,6 @@ 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 { Dispatch } from "redux";
@@ -24,12 +23,13 @@ import { DetailsResource } from "~/models/details";
 import { getResource } from '~/store/resources/resources';
 import { ResourceData } from "~/store/resources-data/resources-data-reducer";
 import { getResourceData } from "~/store/resources-data/resources-data";
-import { toggleDetailsPanel } from '~/store/details-panel/details-panel-action';
+import { toggleDetailsPanel, SLIDE_TIMEOUT } from '~/store/details-panel/details-panel-action';
+import { FileDetails } from '~/views-components/details-panel/file-details';
+import { getNode } from '~/models/tree';
 
 type CssRules = 'root' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'tabContainer';
 
 const DRAWER_WIDTH = 320;
-const SLIDE_TIMEOUT = 500;
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
         background: theme.palette.background.paper,
@@ -56,30 +56,36 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     },
     tabContainer: {
         overflow: 'auto',
-        padding: theme.spacing.unit * 3,
+        padding: theme.spacing.unit * 1,
     },
 });
 
-const getItem = (resource: DetailsResource, resourceData?: ResourceData): DetailsData => {
-    const res = resource || { kind: undefined, name: 'Projects' };
-    switch (res.kind) {
-        case ResourceKind.PROJECT:
-            return new ProjectDetails(res);
-        case ResourceKind.COLLECTION:
-            return new CollectionDetails(res, resourceData);
-        case ResourceKind.PROCESS:
-            return new ProcessDetails(res);
-        default:
-            return new EmptyDetails(res as EmptyResource);
+const EMPTY_RESOURCE: EmptyResource = { kind: undefined, name: 'Projects' };
+
+const getItem = (res: DetailsResource, resourceData?: ResourceData): DetailsData => {
+    if ('kind' in res) {
+        switch (res.kind) {
+            case ResourceKind.PROJECT:
+                return new ProjectDetails(res);
+            case ResourceKind.COLLECTION:
+                return new CollectionDetails(res, resourceData);
+            case ResourceKind.PROCESS:
+                return new ProcessDetails(res);
+            default:
+                return new EmptyDetails(res);
+        }
+    } else {
+        return new FileDetails(res);
     }
 };
 
-const mapStateToProps = ({ detailsPanel, resources, resourcesData }: RootState) => {
-    const resource = getResource(detailsPanel.resourceUuid)(resources) as DetailsResource;
+const mapStateToProps = ({ detailsPanel, resources, resourcesData, collectionPanelFiles }: RootState) => {
+    const resource = getResource(detailsPanel.resourceUuid)(resources) as DetailsResource | undefined;
+    const file = getNode(detailsPanel.resourceUuid)(collectionPanelFiles);
     const resourceData = getResourceData(detailsPanel.resourceUuid)(resourcesData);
     return {
         isOpened: detailsPanel.isOpened,
-        item: getItem(resource, resourceData)
+        item: getItem(resource || (file && file.value) || EMPTY_RESOURCE, resourceData),
     };
 };
 
@@ -146,7 +152,7 @@ export const DetailsPanel = withStyles(styles)(
                         </Grid>
                         <Grid item xs={8}>
                             <Tooltip title={item.getTitle()}>
-                                <Typography variant="title" noWrap>
+                                <Typography variant='h6' noWrap>
                                     {item.getTitle()}
                                 </Typography>
                             </Tooltip>
