Extend details panel with files

Feature #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.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/views-components/collection-panel-files/collection-panel-files.ts b/src/views-components/collection-panel-files/collection-panel-files.ts
index d912ac1302c9b066e059c9a31dddc1e0602e4a5e..cfd32dcfac11181beea85b2a827b5bbe6ce83003 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 { loadDetailsPanel } 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(loadDetailsPanel(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..2801ce9
--- /dev/null
+++ b/src/views-components/details-panel/file-details.tsx
@@ -0,0 +1,19 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { ProjectIcon } from '~/components/icon/icon';
+import { DetailsData } from "./details-data";
+import { CollectionFile, CollectionDirectory } from '~/models/collection-file';
+
+export class FileDetails extends DetailsData<CollectionFile | CollectionDirectory> {
+
+    getIcon(className?: string){
+        return <ProjectIcon className={className} />;
+    }
+
+    getDetails() {
+        return <div>File details</div>;
+    }
+}