Seaparate project-explorer component from project-explorer view

Feature #13601

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

diff --git a/src/components/project-explorer/project-explorer.tsx b/src/components/project-explorer/project-explorer.tsx
new file mode 100644 (file)
index 0000000..490e46f
--- /dev/null
+++ b/src/components/project-explorer/project-explorer.tsx
@@ -0,0 +1,72 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import DataExplorer, { DataExplorerProps } from "../../components/data-explorer/data-explorer";
+import { RouteComponentProps } from 'react-router';
+import { Project } from '../../models/project';
+import { ProjectState, findTreeItem } from '../../store/project/project-reducer';
+import { RootState } from '../../store/store';
+import { connect, DispatchProp } from 'react-redux';
+import { push } from 'react-router-redux';
+import projectActions from "../../store/project/project-action";
+import { Typography } from '@material-ui/core';
+import { Column } from '../../components/data-explorer/column';
+
+interface ProjectExplorerProps {
+    projects: Project[];
+    onProjectClick: (project: Project) => void;
+}
+
+type ProjectExplorerState = Pick<DataExplorerProps<Project>, "columns">;
+
+class ProjectExplorer extends React.Component<ProjectExplorerProps, ProjectExplorerState> {
+
+    state: ProjectExplorerState = {
+        columns: [
+            { header: "Name", selected: true, render: item => <Typography noWrap>{renderIcon(item.kind)} {item.name}</Typography> },
+            { header: "Created at", selected: true, render: item => <Typography noWrap>{formatDate(item.createdAt)}</Typography> },
+            { header: "Modified at", selected: true, render: item => <Typography noWrap>{formatDate(item.modifiedAt)}</Typography> },
+            { header: "UUID", selected: true, render: item => <Typography noWrap>{item.uuid}</Typography> },
+            { header: "Owner UUID", selected: true, render: item => <Typography noWrap>{item.ownerUuid}</Typography> },
+            { header: "URL", selected: true, render: item => <Typography noWrap>{item.href}</Typography> }
+        ]
+    };
+
+    render() {
+        return (
+            <DataExplorer
+                columns={this.state.columns}
+                items={this.props.projects}
+                onItemClick={this.props.onProjectClick}
+                onColumnToggle={this.toggleColumn}
+            />
+        );
+    }
+
+    toggleColumn = (column: Column<Project>) => {
+        const index = this.state.columns.indexOf(column);
+        const columns = this.state.columns.slice(0);
+        columns.splice(index, 1, { ...column, selected: !column.selected });
+        this.setState({ columns });
+    }
+}
+
+const formatDate = (isoDate: string) => {
+    const date = new Date(isoDate);
+    return date.toLocaleString();
+};
+
+const renderIcon = (kind: string) => {
+    switch (kind) {
+        case "arvados#group":
+            return <i className="fas fa-folder" />;
+        case "arvados#groupList":
+            return <i className="fas fa-th" />;
+        default:
+            return <i />;
+    }
+};
+
+export default ProjectExplorer;

diff --git a/src/views/project-explorer/project-explorer.tsx b/src/views/project-explorer/project-explorer.tsx
index 21e8d2789498460028b100e0d35e095dd56b05e1..de91c0bf37d076b400002efcc1f0ecb340c11f33 100644 (file)
--- a/src/views/project-explorer/project-explorer.tsx
+++ b/src/views/project-explorer/project-explorer.tsx
@@ -13,6 +13,7 @@ import { push } from 'react-router-redux';
 import projectActions from "../../store/project/project-action";
 import { Typography } from '@material-ui/core';
 import { Column } from '../../components/data-explorer/column';
+import ProjectExplorer from '../../components/project-explorer/project-explorer';
 
 interface ProjectExplorerViewDataProps {
     projects: ProjectState;
@@ -24,55 +25,24 @@ type ProjectExplorerViewState = Pick<DataExplorerProps<Project>, "columns">;
 
 class ProjectExplorerView extends React.Component<ProjectExplorerViewProps, ProjectExplorerViewState> {
 
-    state: ProjectExplorerViewState = {
-        columns: [
-            { header: "Name", selected: true, render: item => <Typography noWrap>{renderIcon(item.kind)} {item.name}</Typography> },
-            { header: "Created at", selected: true, render: item => <Typography noWrap>{formatDate(item.createdAt)}</Typography> },
-            { header: "Modified at", selected: true, render: item => <Typography noWrap>{formatDate(item.modifiedAt)}</Typography> },
-            { header: "UUID", selected: true, render: item => <Typography noWrap>{item.uuid}</Typography> },
-            { header: "Owner UUID", selected: true, render: item => <Typography noWrap>{item.ownerUuid}</Typography> },
-            { header: "URL", selected: true, render: item => <Typography noWrap>{item.href}</Typography> }
-        ]
-    };
-
     render() {
         const project = findTreeItem(this.props.projects, this.props.match.params.name);
         const projectItems = project && project.items || [];
         return (
-            <DataExplorer {...this.state} items={projectItems.map(item => item.data)} onItemClick={this.goToProject} onColumnToggle={this.toggleColumn} />
+            <ProjectExplorer
+                projects={projectItems.map(item => item.data)}
+                onProjectClick={this.goToProject}
+            />
         );
     }
 
-
     goToProject = (project: Project) => {
         this.props.dispatch(push(`/project/${project.uuid}`));
         this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(project.uuid));
     }
 
-    toggleColumn = (column: Column<Project>) => {
-        const index = this.state.columns.indexOf(column);
-        const columns = this.state.columns.slice(0);
-        columns.splice(index, 1, { ...column, selected: !column.selected });
-        this.setState({ columns });
-    }
 }
 
-const formatDate = (isoDate: string) => {
-    const date = new Date(isoDate);
-    return date.toLocaleString();
-};
-
-const renderIcon = (kind: string) => {
-    switch (kind) {
-        case "arvados#group":
-            return <i className="fas fa-folder" />;
-        case "arvados#groupList":
-            return <i className="fas fa-th" />;
-        default:
-            return <i />;
-    }
-};
-
 export default connect(
     (state: RootState) => ({
         projects: state.projects