Merge branch '14684-image-file-preview-in-details-panel'

refs #14684

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index 9a534e4bcba8a1fcf24dd09f1d0b32fc53fdf1fa..172da050b18dde5f99596d64eef1a9236592b5b6 100644 (file)
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -17,6 +17,7 @@ export interface CollectionPanelFilesProps {
     onOptionsMenuOpen: (event: React.MouseEvent<HTMLElement>) => void;
     onSelectionToggle: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
     onCollapseToggle: (id: string, status: TreeItemStatus) => void;
+    onFileClick: (id: string) => void;
 }
 
 type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader' | 'uploadIcon' | 'button';

diff --git a/src/components/file-tree/file-tree-item.tsx b/src/components/file-tree/file-tree-item.tsx
index 0e8c92e2da6c2343f589696fa999d7e7f9fce49a..0ece937775d2527fc1881a198314f224be6840fa 100644 (file)
--- a/src/components/file-tree/file-tree-item.tsx
+++ b/src/components/file-tree/file-tree-item.tsx
@@ -46,7 +46,7 @@ export const FileTreeItem = withStyles(fileTreeItemStyle)(
             return <>
                 <div className={classes.root}>
                     <ListItemTextIcon
-                        icon={getIcon(item)}
+                        icon={getIcon(item.data.type)}
                         name={item.data.name} />
                     <div className={classes.spacer} />
                     <Typography
@@ -60,7 +60,6 @@ export const FileTreeItem = withStyles(fileTreeItemStyle)(
                         </IconButton>
                     </Tooltip>
                 </div >
-                <FileThumbnail file={item.data} />
             </>;
         }
 
@@ -69,8 +68,8 @@ export const FileTreeItem = withStyles(fileTreeItemStyle)(
         }
     });
 
-const getIcon = (item: TreeItem<FileTreeData>) => {
-    switch (item.data.type) {
+export const getIcon = (type: string) => {
+    switch (type) {
         case 'directory':
             return ProjectIcon;
         case 'file':

diff --git a/src/components/file-tree/file-tree.tsx b/src/components/file-tree/file-tree.tsx
index 0a96254c58607c2ccc477a1128c624fb75f76cc9..4f581a6cf860c3ad5178d9f74d90390d41a7713a 100644 (file)
--- a/src/components/file-tree/file-tree.tsx
+++ b/src/components/file-tree/file-tree.tsx
@@ -12,6 +12,7 @@ export interface FileTreeProps {
     onMenuOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
     onSelectionToggle: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
     onCollapseToggle: (id: string, status: TreeItemStatus) => void;
+    onFileClick: (id: string) => void;
 }
 
 export class FileTree extends React.Component<FileTreeProps> {
@@ -36,7 +37,9 @@ export class FileTree extends React.Component<FileTreeProps> {
         this.props.onCollapseToggle(id, status);
     }
 
-    handleToggleActive = () => { return; };
+    handleToggleActive = (_: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => {
+        this.props.onFileClick(item.id);
+    }
 
     handleSelectionChange = (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => {
         event.stopPropagation();

diff --git a/src/models/details.ts b/src/models/details.ts
index 42eb5c9c604acf6d14082cf2745000b719cecaa0..f53007086749c55cb4070d7fd187548a8c76058c 100644 (file)
--- a/src/models/details.ts
+++ b/src/models/details.ts
@@ -6,5 +6,6 @@ import { ProjectResource } from "./project";
 import { CollectionResource } from "./collection";
 import { ProcessResource } from "./process";
 import { EmptyResource } from "./empty";
+import { CollectionFile, CollectionDirectory } from '~/models/collection-file';
 
-export type DetailsResource = ProjectResource | CollectionResource | ProcessResource | EmptyResource;
+export type DetailsResource = ProjectResource | CollectionResource | ProcessResource | EmptyResource | CollectionFile | CollectionDirectory;

diff --git a/src/store/details-panel/details-panel-action.ts b/src/store/details-panel/details-panel-action.ts
index 2c742a1f38a3f4e63698019c092dec34935f1079..a5ff58730da0f9d2b718749f7cfe0103a5a93d58 100644 (file)
--- a/src/store/details-panel/details-panel-action.ts
+++ b/src/store/details-panel/details-panel-action.ts
@@ -18,6 +18,7 @@ export const SLIDE_TIMEOUT = 500;
 
 export const detailsPanelActions = unionize({
     TOGGLE_DETAILS_PANEL: ofType<{}>(),
+    OPEN_DETAILS_PANEL: ofType<string>(),
     LOAD_DETAILS_PANEL: ofType<string>()
 });
 
@@ -28,6 +29,8 @@ export const PROJECT_PROPERTIES_DIALOG_NAME = 'projectPropertiesDialogName';
 
 export const loadDetailsPanel = (uuid: string) => detailsPanelActions.LOAD_DETAILS_PANEL(uuid);
 
+export const openDetailsPanel = (uuid: string) => detailsPanelActions.OPEN_DETAILS_PANEL(uuid);
+
 export const openProjectPropertiesDialog = () =>
     (dispatch: Dispatch) => {
         dispatch<any>(dialogActions.OPEN_DIALOG({ id: PROJECT_PROPERTIES_DIALOG_NAME, data: { } }));

diff --git a/src/store/details-panel/details-panel-reducer.ts b/src/store/details-panel/details-panel-reducer.ts
index 091b2fa2cf1adcfa55f19454fdae2f37d9fef7d9..38c0edd506d148c8442a98ad20e49bdfe8494d4d 100644 (file)
--- a/src/store/details-panel/details-panel-reducer.ts
+++ b/src/store/details-panel/details-panel-reducer.ts
@@ -18,5 +18,6 @@ export const detailsPanelReducer = (state: DetailsPanelState = initialState, act
     detailsPanelActions.match(action, {
         default: () => state,
         LOAD_DETAILS_PANEL: resourceUuid => ({ ...state, resourceUuid }),
-        TOGGLE_DETAILS_PANEL: () => ({ ...state, isOpened: !state.isOpened })
+        OPEN_DETAILS_PANEL: resourceUuid => ({ resourceUuid, isOpened: true }),
+        TOGGLE_DETAILS_PANEL: () => ({ ...state, isOpened: !state.isOpened }),
     });

diff --git a/src/views-components/collection-panel-files/collection-panel-files.ts b/src/views-components/collection-panel-files/collection-panel-files.ts
index d912ac1302c9b066e059c9a31dddc1e0602e4a5e..7836e1f794d2436e7f49a5742b9a4071f3920fc1 100644 (file)
--- a/src/views-components/collection-panel-files/collection-panel-files.ts
+++ b/src/views-components/collection-panel-files/collection-panel-files.ts
@@ -23,6 +23,7 @@ import { CollectionFileType, createCollectionDirectory } from "~/models/collecti
 import { openContextMenu, openCollectionFilesContextMenu } from '~/store/context-menu/context-menu-actions';
 import { openUploadCollectionFilesDialog } from '~/store/collections/collection-upload-actions';
 import { ResourceKind } from "~/models/resource";
+import { openDetailsPanel } from '~/store/details-panel/details-panel-action';
 
 const memoizedMapStateToProps = () => {
     let prevState: CollectionPanelFilesState;
@@ -40,7 +41,7 @@ const memoizedMapStateToProps = () => {
     };
 };
 
-const mapDispatchToProps = (dispatch: Dispatch): Pick<CollectionPanelFilesProps, 'onUploadDataClick' | 'onCollapseToggle' | 'onSelectionToggle' | 'onItemMenuOpen' | 'onOptionsMenuOpen'> => ({
+const mapDispatchToProps = (dispatch: Dispatch): Pick<CollectionPanelFilesProps, 'onFileClick' | 'onUploadDataClick' | 'onCollapseToggle' | 'onSelectionToggle' | 'onItemMenuOpen' | 'onOptionsMenuOpen'> => ({
     onUploadDataClick: () => {
         dispatch<any>(openUploadCollectionFilesDialog());
     },
@@ -56,6 +57,9 @@ const mapDispatchToProps = (dispatch: Dispatch): Pick<CollectionPanelFilesProps,
     onOptionsMenuOpen: (event) => {
         dispatch<any>(openCollectionFilesContextMenu(event));
     },
+    onFileClick: (id) => {
+        dispatch(openDetailsPanel(id));
+    },
 });
 
 

diff --git a/src/views-components/details-panel/details-panel.tsx b/src/views-components/details-panel/details-panel.tsx
index fe434b6c731aef10539945b662cb36bec2c8b9dd..315fc9855dbf6038f03405f3e16ce80cdac22765 100644 (file)
--- a/src/views-components/details-panel/details-panel.tsx
+++ b/src/views-components/details-panel/details-panel.tsx
@@ -24,6 +24,8 @@ 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, 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';
 
@@ -58,26 +60,32 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     },
 });
 
-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)
     };
 };
 

diff --git a/src/views-components/details-panel/file-details.tsx b/src/views-components/details-panel/file-details.tsx
new file mode 100644 (file)
index 0000000..db7c9cf
--- /dev/null
+++ b/src/views-components/details-panel/file-details.tsx
@@ -0,0 +1,35 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { DetailsData } from "./details-data";
+import { CollectionFile, CollectionDirectory, CollectionFileType } from '~/models/collection-file';
+import { getIcon } from '~/components/file-tree/file-tree-item';
+import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
+import { formatFileSize } from '~/common/formatters';
+import { FileThumbnail } from '~/components/file-tree/file-thumbnail';
+import isImage from 'is-image';
+
+export class FileDetails extends DetailsData<CollectionFile | CollectionDirectory> {
+
+    getIcon(className?: string) {
+        const Icon = getIcon(this.item.type);
+        return <Icon className={className} />;
+    }
+
+    getDetails() {
+        const { item } = this;
+        return item.type === CollectionFileType.FILE
+            ? <>
+                <DetailsAttribute label='Size' value={formatFileSize(item.size)} />
+                {
+                    isImage(item.url) && <>
+                        <DetailsAttribute label='Preview' />
+                        <FileThumbnail file={item} />
+                    </>
+                }
+            </>
+            : <div />;
+    }
+}

diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index 41a685f3283667a3fc5d39b60ccf18e6bc7a2c40..4ec39ca84debcf2fe6b3e4c8ede9b738f90422e3 100644 (file)
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -25,6 +25,7 @@ import { ContextMenuKind } from '~/views-components/context-menu/context-menu';
 import { formatFileSize } from "~/common/formatters";
 import { getResourceData } from "~/store/resources-data/resources-data";
 import { ResourceData } from "~/store/resources-data/resources-data-reducer";
+import { openDetailsPanel } from '~/store/details-panel/details-panel-action';
 
 type CssRules = 'card' | 'iconHeader' | 'tag' | 'copyIcon' | 'label' | 'value' | 'link';
 
@@ -77,13 +78,18 @@ export const CollectionPanel = withStyles(styles)(
         return { item, data };
     })(
         class extends React.Component<CollectionPanelProps> {
+
             render() {
                 const { classes, item, data, dispatch } = this.props;
                 return item
                     ? <>
                         <Card className={classes.card}>
                             <CardHeader
-                                avatar={<CollectionIcon className={classes.iconHeader} />}
+                                avatar={
+                                    <IconButton onClick={this.openCollectionDetails}>
+                                        <CollectionIcon className={classes.iconHeader} />
+                                    </IconButton>
+                                }
                                 action={
                                     <Tooltip title="More options" disableFocusListener>
                                         <IconButton
@@ -94,7 +100,9 @@ export const CollectionPanel = withStyles(styles)(
                                     </Tooltip>
                                 }
                                 title={item && item.name}
-                                subheader={item && item.description} />
+                                titleTypographyProps={this.titleProps}
+                                subheader={item && item.description}
+                                subheaderTypographyProps={this.titleProps} />
                             <CardContent>
                                 <Grid container direction="column">
                                     <Grid item xs={6}>
@@ -113,7 +121,7 @@ export const CollectionPanel = withStyles(styles)(
                                             label='Content size' value={data && formatFileSize(data.fileSize)} />
                                         <DetailsAttribute classLabel={classes.label} classValue={classes.value}
                                             label='Owner' value={item && item.ownerUuid} />
-                                        <span onClick={() => dispatch<any>(navigateToProcess(item.properties.container_request  || item.properties.containerRequest))}>
+                                        <span onClick={() => dispatch<any>(navigateToProcess(item.properties.container_request || item.properties.containerRequest))}>
                                             <DetailsAttribute classLabel={classes.link} label='Link to process' />
                                         </span>
                                     </Grid>
@@ -172,6 +180,18 @@ export const CollectionPanel = withStyles(styles)(
                     hideDuration: 2000
                 }));
             }
+
+            openCollectionDetails = () => {
+                const { item } = this.props;
+                if (item) {
+                    this.props.dispatch(openDetailsPanel(item.uuid));
+                }
+            }
+
+            titleProps = {
+                onClick: this.openCollectionDetails
+            };
+
         }
     )
 );