[ARVADOS-WORKBENCH2] created: 1.3.0-273-gdbd2dcae
Git user
git at public.curoverse.com
Fri Dec 28 06:37:23 EST 2018
at dbd2dcaeb2c4f3f3df83c3d127e99ce4705a4723 (commit)
commit dbd2dcaeb2c4f3f3df83c3d127e99ce4705a4723
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Fri Dec 28 12:37:09 2018 +0100
Add size info and preview to FileDetails
Feature #14684
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/views-components/details-panel/file-details.tsx b/src/views-components/details-panel/file-details.tsx
index 86c63eb3..7d43bd4b 100644
--- a/src/views-components/details-panel/file-details.tsx
+++ b/src/views-components/details-panel/file-details.tsx
@@ -4,8 +4,11 @@
import * as React from 'react';
import { DetailsData } from "./details-data";
-import { CollectionFile, CollectionDirectory } from '~/models/collection-file';
+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';
export class FileDetails extends DetailsData<CollectionFile | CollectionDirectory> {
@@ -15,6 +18,13 @@ export class FileDetails extends DetailsData<CollectionFile | CollectionDirector
}
getDetails() {
- return <div>File details</div>;
+ const { item } = this;
+ return item.type === CollectionFileType.FILE
+ ? <>
+ <DetailsAttribute label='Size' value={formatFileSize(item.size)} />
+ <DetailsAttribute label='Preview' />
+ <FileThumbnail file={item}/>
+ </>
+ : <div />;
}
}
commit 9db94b3a52b12a361760ce9c027eb2da626d8c85
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Fri Dec 28 12:36:44 2018 +0100
Delete image file preview from files tree
Feature #14684
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/file-tree/file-tree-item.tsx b/src/components/file-tree/file-tree-item.tsx
index b6802a77..0ece9377 100644
--- a/src/components/file-tree/file-tree-item.tsx
+++ b/src/components/file-tree/file-tree-item.tsx
@@ -60,7 +60,6 @@ export const FileTreeItem = withStyles(fileTreeItemStyle)(
</IconButton>
</Tooltip>
</div >
- <FileThumbnail file={item.data} />
</>;
}
commit cdad04a31b572aa401e3f5d1fdc2c0f69d6e2d08
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Fri Dec 28 12:21:28 2018 +0100
Display correct icon in FileDetails
Feature #14684
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/views-components/details-panel/file-details.tsx b/src/views-components/details-panel/file-details.tsx
index 2801ce9b..86c63eb3 100644
--- a/src/views-components/details-panel/file-details.tsx
+++ b/src/views-components/details-panel/file-details.tsx
@@ -3,14 +3,15 @@
// 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';
+import { getIcon } from '~/components/file-tree/file-tree-item';
export class FileDetails extends DetailsData<CollectionFile | CollectionDirectory> {
- getIcon(className?: string){
- return <ProjectIcon className={className} />;
+ getIcon(className?: string) {
+ const Icon = getIcon(this.item.type);
+ return <Icon className={className} />;
}
getDetails() {
commit 307fc145d53b75e2a19520ff60471c642bd9d29e
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Fri Dec 28 12:20:59 2018 +0100
Refactor getIcon so that it's easier to reuse
Feature #14684
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/file-tree/file-tree-item.tsx b/src/components/file-tree/file-tree-item.tsx
index 0e8c92e2..b6802a77 100644
--- 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
@@ -69,8 +69,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':
commit 3acd5eca12d4c828e454dfe636ee72bdd44745c7
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Fri Dec 28 12:16:09 2018 +0100
Extend details panel with files
Feature #14684
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at 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 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<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 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<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 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<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 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<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
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<CollectionFile | CollectionDirectory> {
+
+ getIcon(className?: string){
+ return <ProjectIcon className={className} />;
+ }
+
+ getDetails() {
+ return <div>File details</div>;
+ }
+}
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list