From 55bb503e1b885a53ca20fc120c862c7af2db33af Mon Sep 17 00:00:00 2001
From: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
Date: Fri, 27 Jul 2018 15:04:53 +0200
Subject: [PATCH] Create CollectionPanelFiles [WIP]

Feature #13855

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
---
 .../collection-panel-files.tsx                | 63 +++++++++++++++++++
 src/views/workbench/workbench.tsx             |  9 +++
 2 files changed, 72 insertions(+)
 create mode 100644 src/components/collection-panel-files/collection-panel-files.tsx

diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
new file mode 100644
index 00000000..df277e33
--- /dev/null
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -0,0 +1,63 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { TreeItem, TreeItemStatus } from '../tree/tree';
+import { FileTreeData } from '../file-tree/file-tree-data';
+import { FileTree } from '../file-tree/file-tree';
+import { CollectionPanelFilesState } from '../../store/collection-panel/collection-panel-files/collection-panel-files-state';
+
+export interface CollectionPanelFilesProps {
+    items: Array<TreeItem<FileTreeData>>;
+    onItemContextMenu: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
+    onCommonContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
+    onSelectionToggle: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
+    onCollapseToggle: (id: string, status: TreeItemStatus) => void;
+}
+
+export const CollectionPanelFiles = ({ onItemContextMenu, onCommonContextMenu, ...treeProps }: CollectionPanelFilesProps) =>
+    <div>
+        <FileTree onContextMenu={onItemContextMenu} {...treeProps} />
+    </div>;
+
+export const collectionPanelItems: Array<TreeItem<FileTreeData>> = [{
+    active: false,
+    data: {
+        name: "Directory 1",
+        type: "directory"
+    },
+    id: "Directory 1",
+    open: true,
+    status: TreeItemStatus.LOADED,
+    items: [{
+        active: false,
+        data: {
+            name: "Directory 1.1",
+            type: "directory"
+        },
+        id: "Directory 1.1",
+        open: false,
+        status: TreeItemStatus.LOADED,
+        items: []
+    }, {
+        active: false,
+        data: {
+            name: "File 1.1",
+            type: "file"
+        },
+        id: "File 1.1",
+        open: false,
+        status: TreeItemStatus.LOADED,
+        items: []
+    }]
+}, {
+    active: false,
+    data: {
+        name: "Directory 2",
+        type: "directory"
+    },
+    id: "Directory 2",
+    open: false,
+    status: TreeItemStatus.LOADED
+}]; 
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 3637528d..e932fba8 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -36,6 +36,7 @@ import { FavoritePanel, FAVORITE_PANEL_ID } from "../favorite-panel/favorite-pan
 import { CurrentTokenDialog } from '../../views-components/current-token-dialog/current-token-dialog';
 import { dataExplorerActions } from '../../store/data-explorer/data-explorer-action';
 import { Snackbar } from '../../views-components/snackbar/snackbar';
+import { CollectionPanelFiles, collectionPanelItems } from '../../components/collection-panel-files/collection-panel-files';
 
 const drawerWidth = 240;
 const appBarHeight = 100;
@@ -212,6 +213,14 @@ export const Workbench = withStyles(styles)(
                                 <Switch>
                                     <Route path="/projects/:id" render={this.renderProjectPanel} />
                                     <Route path="/favorites" render={this.renderFavoritePanel} />
+                                    <Route path="/" render={() => 
+                                    <CollectionPanelFiles 
+                                        items={collectionPanelItems} 
+                                        onCollapseToggle={console.log}
+                                        onSelectionToggle={console.log}
+                                        onItemContextMenu={console.log}
+                                        onCommonContextMenu={console.log}
+                                        />} />
                                 </Switch>
                             </div>
                             {user && <DetailsPanel />}
-- 
2.30.2