From 3acd5eca12d4c828e454dfe636ee72bdd44745c7 Mon Sep 17 00:00:00 2001 From: Michal Klobukowski Date: Fri, 28 Dec 2018 12:16:09 +0100 Subject: [PATCH] Extend details panel with files Feature #14684 Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski --- .../collection-panel-files.tsx | 1 + src/components/file-tree/file-tree.tsx | 5 ++- src/models/details.ts | 3 +- .../collection-panel-files.ts | 6 +++- .../details-panel/details-panel.tsx | 36 +++++++++++-------- .../details-panel/file-details.tsx | 19 ++++++++++ 6 files changed, 53 insertions(+), 17 deletions(-) create mode 100644 src/views-components/details-panel/file-details.tsx diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx index 9a534e4b..172da050 100644 --- 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) => void; onSelectionToggle: (event: React.MouseEvent, item: TreeItem) => 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 0a96254c..4f581a6c 100644 --- 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, item: TreeItem) => void; onSelectionToggle: (event: React.MouseEvent, item: TreeItem) => void; onCollapseToggle: (id: string, status: TreeItemStatus) => void; + onFileClick: (id: string) => void; } export class FileTree extends React.Component { @@ -36,7 +37,9 @@ export class FileTree extends React.Component { this.props.onCollapseToggle(id, status); } - handleToggleActive = () => { return; }; + handleToggleActive = (_: React.MouseEvent, item: TreeItem) => { + this.props.onFileClick(item.id); + } handleSelectionChange = (event: React.MouseEvent, item: TreeItem) => { event.stopPropagation(); diff --git a/src/models/details.ts b/src/models/details.ts index 42eb5c9c..f5300708 100644 --- 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 d912ac13..cfd32dcf 100644 --- 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 => ({ +const mapDispatchToProps = (dispatch: Dispatch): Pick => ({ onUploadDataClick: () => { dispatch(openUploadCollectionFilesDialog()); }, @@ -56,6 +57,9 @@ const mapDispatchToProps = (dispatch: Dispatch): Pick { dispatch(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 fe434b6c..315fc985 100644 --- 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 = (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 index 00000000..2801ce9b --- /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 { + + getIcon(className?: string){ + return ; + } + + getDetails() { + return
File details
; + } +} -- 2.30.2