[ARVADOS-WORKBENCH2] updated: 1.1.4-122-gbca77b4
Git user
git at public.curoverse.com
Wed Jun 20 10:42:25 EDT 2018
Summary of changes:
package.json | 2 +-
.../data-explorer/data-explorer-column.tsx | 19 ++
src/components/data-explorer/data-explorer.tsx | 121 ++++++++++
.../data-table-filters/data-table-filters.test.tsx | 2 -
.../data-table-filters/data-table-filters.tsx | 5 +-
.../data-explorer/data-explorer.tsx | 253 ---------------------
.../project-explorer-item.ts} | 2 +-
.../project-explorer/project-explorer.tsx | 173 ++++++++++++++
src/views/data-explorer/data-explorer-selectors.ts | 11 -
src/views/data-explorer/data-explorer.tsx | 59 -----
src/views/project-panel/project-panel-selectors.ts | 15 ++
src/views/project-panel/project-panel.tsx | 34 +++
src/views/workbench/workbench.tsx | 4 +-
yarn.lock | 8 +-
14 files changed, 369 insertions(+), 339 deletions(-)
create mode 100644 src/components/data-explorer/data-explorer-column.tsx
create mode 100644 src/components/data-explorer/data-explorer.tsx
delete mode 100644 src/views-components/data-explorer/data-explorer.tsx
rename src/views-components/{data-explorer/data-item.ts => project-explorer/project-explorer-item.ts} (86%)
create mode 100644 src/views-components/project-explorer/project-explorer.tsx
delete mode 100644 src/views/data-explorer/data-explorer-selectors.ts
delete mode 100644 src/views/data-explorer/data-explorer.tsx
create mode 100644 src/views/project-panel/project-panel-selectors.ts
create mode 100644 src/views/project-panel/project-panel.tsx
via bca77b4dbbc90bc60de06bd90a20e9a46c02fcfa (commit)
from 5925c0eb9468ffca9419e47ae333501968b4e24e (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit bca77b4dbbc90bc60de06bd90a20e9a46c02fcfa
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Wed Jun 20 16:42:07 2018 +0200
Extract generic data-explorer component
Feature #13633
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/package.json b/package.json
index 1f08e6c..3db2404 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
"@types/enzyme-adapter-react-16": "1.0.2",
"@types/jest": "23.1.0",
"@types/node": "10.3.3",
- "@types/react": "16.4.1",
+ "@types/react": "16.3",
"@types/react-dom": "16.0.6",
"@types/react-redux": "6.0.2",
"@types/react-router": "4.0.26",
diff --git a/src/components/data-explorer/data-explorer-column.tsx b/src/components/data-explorer/data-explorer-column.tsx
new file mode 100644
index 0000000..62dc747
--- /dev/null
+++ b/src/components/data-explorer/data-explorer-column.tsx
@@ -0,0 +1,19 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { SortDirection } from "../../components/data-table/data-column";
+import { DataTableFilterItem } from "../../components/data-table-filters/data-table-filters";
+
+
+export interface DataExplorerColumn<T> {
+ name: string;
+ selected: boolean;
+ configurable?: boolean;
+ sortable?: boolean;
+ sortDirection?: SortDirection;
+ filterable?: boolean;
+ filters?: DataTableFilterItem[];
+ render: (item: T) => React.ReactElement<void>;
+ renderHeader?: () => React.ReactElement<void> | null;
+}
diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
new file mode 100644
index 0000000..4fc9fb9
--- /dev/null
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -0,0 +1,121 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { Grid, Paper, Toolbar } from '@material-ui/core';
+import ContextMenu, { ContextMenuActionGroup } from "../../components/context-menu/context-menu";
+import ColumnSelector from "../../components/column-selector/column-selector";
+import DataTable from "../../components/data-table/data-table";
+import { mockAnchorFromMouseEvent } from "../../components/popover/helpers";
+import { DataColumn, toggleSortDirection } from "../../components/data-table/data-column";
+import { DataTableFilterItem } from '../../components/data-table-filters/data-table-filters';
+import { DataExplorerColumn } from './data-explorer-column';
+
+interface DataExplorerProps<T> {
+ items: T[];
+ columns: Array<DataExplorerColumn<T>>;
+ contextActions: Array<ContextMenuActionGroup<T>>;
+ onRowClick: (item: T) => void;
+ onColumnToggle: (column: DataExplorerColumn<T>) => void;
+ onSortingToggle: (column: DataExplorerColumn<T>) => void;
+ onFiltersChange: (columns: DataExplorerColumn<T>) => void;
+}
+
+interface DataExplorerState<T> {
+ contextMenu: {
+ anchorEl?: HTMLElement;
+ item?: T;
+ };
+}
+
+class DataExplorer<T> extends React.Component<DataExplorerProps<T>, DataExplorerState<T>> {
+ state: DataExplorerState<T> = {
+ contextMenu: {}
+ };
+
+ render() {
+ return <Paper>
+ <ContextMenu
+ {...this.state.contextMenu}
+ actions={this.contextActions}
+ onClose={this.closeContextMenu} />
+ <Toolbar>
+ <Grid container justify="flex-end">
+ <ColumnSelector
+ columns={this.columns}
+ onColumnToggle={this.toggleColumn} />
+ </Grid>
+ </Toolbar>
+ <DataTable
+ columns={this.columns}
+ items={this.props.items}
+ onRowClick={(_, row: T) => this.props.onRowClick(row)}
+ onRowContextMenu={this.openItemMenuOnRowClick} />
+ <Toolbar />
+ </Paper>;
+ }
+
+ get columns(): Array<DataColumn<T>> {
+ return this.props.columns.map((column): DataColumn<T> => ({
+ configurable: column.configurable,
+ filters: column.filters,
+ name: column.name,
+ onFiltersChange: column.filterable ? this.changeFilters(column) : undefined,
+ onSortToggle: column.sortable ? this.toggleSort(column) : undefined,
+ render: column.render,
+ renderHeader: column.renderHeader,
+ selected: column.selected,
+ sortDirection: column.sortDirection
+ }));
+ }
+
+ get contextActions() {
+ return this.props.contextActions.map(actionGroup =>
+ actionGroup.map(action => ({
+ ...action,
+ onClick: (item: T) => {
+ this.closeContextMenu();
+ action.onClick(item);
+ }
+ })));
+ }
+
+ toggleColumn = (column: DataExplorerColumn<T>) => {
+ this.props.onColumnToggle(column);
+ }
+
+ toggleSort = (column: DataExplorerColumn<T>) => () => {
+ this.props.onSortingToggle(toggleSortDirection(column));
+ }
+
+ changeFilters = (column: DataExplorerColumn<T>) => (filters: DataTableFilterItem[]) => {
+ this.props.onFiltersChange({ ...column, filters });
+ }
+
+ openItemMenuOnRowClick = (event: React.MouseEvent<HTMLElement>, item: T) => {
+ event.preventDefault();
+ this.setState({
+ contextMenu: {
+ anchorEl: mockAnchorFromMouseEvent(event),
+ item
+ }
+ });
+ }
+
+ openItemMenuOnActionsClick = (event: React.MouseEvent<HTMLElement>, item: T) => {
+ this.setState({
+ contextMenu: {
+ anchorEl: event.currentTarget,
+ item
+ }
+ });
+ }
+
+ closeContextMenu = () => {
+ this.setState({ contextMenu: {} });
+ }
+
+}
+
+export default DataExplorer;
diff --git a/src/components/data-table-filters/data-table-filters.test.tsx b/src/components/data-table-filters/data-table-filters.test.tsx
index 6756252..b2daebe 100644
--- a/src/components/data-table-filters/data-table-filters.test.tsx
+++ b/src/components/data-table-filters/data-table-filters.test.tsx
@@ -5,10 +5,8 @@
import * as React from "react";
import { mount, configure } from "enzyme";
import DataTableFilter, { DataTableFilterItem } from "./data-table-filters";
-
import * as Adapter from 'enzyme-adapter-react-16';
import { Checkbox, ButtonBase, ListItem, Button, ListItemText } from "@material-ui/core";
-import dataTableFilters from "./data-table-filters";
configure({ adapter: new Adapter() });
diff --git a/src/components/data-table-filters/data-table-filters.tsx b/src/components/data-table-filters/data-table-filters.tsx
index cf0260b..b2e5a74 100644
--- a/src/components/data-table-filters/data-table-filters.tsx
+++ b/src/components/data-table-filters/data-table-filters.tsx
@@ -50,11 +50,10 @@ class DataTableFilter extends React.Component<DataTableFilterProps & WithStyles<
render() {
const { name, classes, children } = this.props;
+ const isActive = this.state.filters.filter(({ selected }) => !selected).length > 0;
return <>
<ButtonBase
- className={classnames([
- classes.root,
- { [classes.active]: this.state.filters.filter(({ selected }) => !selected).length > 0 }])}
+ className={classnames([classes.root, { [classes.active]: isActive }])}
component="span"
onClick={this.open}
disableRipple>
diff --git a/src/views-components/data-explorer/data-explorer.tsx b/src/views-components/data-explorer/data-explorer.tsx
deleted file mode 100644
index dab686e..0000000
--- a/src/views-components/data-explorer/data-explorer.tsx
+++ /dev/null
@@ -1,253 +0,0 @@
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import * as React from 'react';
-import { Typography, Grid, Paper, Toolbar } from '@material-ui/core';
-import IconButton from '@material-ui/core/IconButton';
-import MoreVertIcon from "@material-ui/icons/MoreVert";
-import { formatFileSize, formatDate } from '../../common/formatters';
-import { DataItem } from './data-item';
-import ContextMenu from "../../components/context-menu/context-menu";
-import ColumnSelector from "../../components/column-selector/column-selector";
-import DataTable from "../../components/data-table/data-table";
-import { mockAnchorFromMouseEvent } from "../../components/popover/helpers";
-import { DataColumn, toggleSortDirection, resetSortDirection } from "../../components/data-table/data-column";
-
-export interface DataExplorerContextActions {
- onAddToFavourite: (dataIitem: DataItem) => void;
- onCopy: (dataIitem: DataItem) => void;
- onDownload: (dataIitem: DataItem) => void;
- onMoveTo: (dataIitem: DataItem) => void;
- onRemove: (dataIitem: DataItem) => void;
- onRename: (dataIitem: DataItem) => void;
- onShare: (dataIitem: DataItem) => void;
-}
-interface DataExplorerProps {
- items: DataItem[];
- onItemClick: (item: DataItem) => void;
- contextActions: DataExplorerContextActions;
-}
-
-interface DataExplorerState {
- columns: Array<DataColumn<DataItem>>;
- contextMenu: {
- anchorEl?: HTMLElement;
- item?: DataItem;
- };
-}
-
-class DataExplorer extends React.Component<DataExplorerProps, DataExplorerState> {
- state: DataExplorerState = {
- contextMenu: {},
- columns: [{
- name: "Name",
- selected: true,
- sortDirection: "asc",
- onSortToggle: () => this.toggleSort("Name"),
- render: item => this.renderName(item)
- }, {
- name: "Status",
- selected: true,
- onFiltersChange: console.log,
- filters: [{
- name: "In progress",
- selected: true
- }, {
- name: "Complete",
- selected: true
- }],
- render: item => renderStatus(item.status)
- }, {
- name: "Type",
- selected: true,
- onFiltersChange: console.log,
- filters: [{
- name: "Collection",
- selected: true
- }, {
- name: "Group",
- selected: true
- }],
- render: item => renderType(item.type)
- }, {
- name: "Owner",
- selected: true,
- render: item => renderOwner(item.owner)
- }, {
- name: "File size",
- selected: true,
- render: item => renderFileSize(item.fileSize)
- }, {
- name: "Last modified",
- selected: true,
- onSortToggle: () => this.toggleSort("Last modified"),
- render: item => renderDate(item.lastModified)
- }, {
- name: "Actions",
- selected: true,
- configurable: false,
- renderHeader: () => null,
- render: item => this.renderActions(item)
- }]
- };
-
- contextMenuActions = [[{
- icon: "fas fa-users fa-fw",
- name: "Share",
- onClick: this.handleContextAction("onShare")
- }, {
- icon: "fas fa-sign-out-alt fa-fw",
- name: "Move to",
- onClick: this.handleContextAction("onMoveTo")
- }, {
- icon: "fas fa-star fa-fw",
- name: "Add to favourite",
- onClick: this.handleContextAction("onAddToFavourite")
- }, {
- icon: "fas fa-edit fa-fw",
- name: "Rename",
- onClick: this.handleContextAction("onRename")
- }, {
- icon: "fas fa-copy fa-fw",
- name: "Make a copy",
- onClick: this.handleContextAction("onCopy")
- }, {
- icon: "fas fa-download fa-fw",
- name: "Download",
- onClick: this.handleContextAction("onDownload")
- }], [{
- icon: "fas fa-trash-alt fa-fw",
- name: "Remove",
- onClick: this.handleContextAction("onRemove")
- }
- ]];
-
- render() {
- return <Paper>
- <ContextMenu
- {...this.state.contextMenu}
- actions={this.contextMenuActions}
- onClose={this.closeContextMenu} />
- <Toolbar>
- <Grid container justify="flex-end">
- <ColumnSelector
- columns={this.state.columns}
- onColumnToggle={this.toggleColumn} />
- </Grid>
- </Toolbar>
- <DataTable
- columns={this.state.columns}
- items={this.props.items}
- onRowContextMenu={this.openItemMenuOnRowClick} />
- <Toolbar />
- </Paper>;
- }
-
- toggleColumn = (column: DataColumn<DataItem>) => {
- 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 });
- }
-
- renderName = (item: DataItem) =>
- <Grid
- container
- alignItems="center"
- wrap="nowrap"
- spacing={16}
- onClick={() => this.props.onItemClick(item)}>
- <Grid item>
- {renderIcon(item)}
- </Grid>
- <Grid item>
- <Typography color="primary">
- {item.name}
- </Typography>
- </Grid>
- </Grid>
-
- renderActions = (item: DataItem) =>
- <Grid container justify="flex-end">
- <IconButton onClick={event => this.openItemMenuOnActionsClick(event, item)}>
- <MoreVertIcon />
- </IconButton>
- </Grid>
-
- openItemMenuOnRowClick = (event: React.MouseEvent<HTMLElement>, item: DataItem) => {
- event.preventDefault();
- this.setState({
- contextMenu: {
- anchorEl: mockAnchorFromMouseEvent(event),
- item
- }
- });
- }
-
- openItemMenuOnActionsClick = (event: React.MouseEvent<HTMLElement>, item: DataItem) => {
- this.setState({
- contextMenu: {
- anchorEl: event.currentTarget,
- item
- }
- });
- }
-
- closeContextMenu = () => {
- this.setState({ contextMenu: {} });
- }
-
- handleContextAction(action: keyof DataExplorerContextActions) {
- return (item: DataItem) => {
- this.closeContextMenu();
- this.props.contextActions[action](item);
- };
- }
-
- toggleSort = (columnName: string) => {
- this.setState({
- columns: this.state.columns.map((column, index) =>
- column.name === columnName ? toggleSortDirection(column) : resetSortDirection(column))
- });
- }
-
-}
-
-const renderIcon = (dataItem: DataItem) => {
- switch (dataItem.type) {
- case "arvados#group":
- return <i className="fas fa-folder fa-lg" />;
- case "arvados#groupList":
- return <i className="fas fa-th fa-lg" />;
- default:
- return <i />;
- }
-};
-
-const renderDate = (date: string) =>
- <Typography noWrap>
- {formatDate(date)}
- </Typography>;
-
-const renderFileSize = (fileSize?: number) =>
- <Typography noWrap>
- {formatFileSize(fileSize)}
- </Typography>;
-
-const renderOwner = (owner: string) =>
- <Typography noWrap color="primary">
- {owner}
- </Typography>;
-
-const renderType = (type: string) =>
- <Typography noWrap>
- {type}
- </Typography>;
-
-const renderStatus = (status?: string) =>
- <Typography noWrap align="center">
- {status || "-"}
- </Typography>;
-
-export default DataExplorer;
diff --git a/src/views-components/data-explorer/data-item.ts b/src/views-components/project-explorer/project-explorer-item.ts
similarity index 86%
rename from src/views-components/data-explorer/data-item.ts
rename to src/views-components/project-explorer/project-explorer-item.ts
index 65e8f63..055c22c 100644
--- a/src/views-components/data-explorer/data-item.ts
+++ b/src/views-components/project-explorer/project-explorer-item.ts
@@ -2,7 +2,7 @@
//
// SPDX-License-Identifier: AGPL-3.0
-export interface DataItem {
+export interface ProjectExplorerItem {
uuid: string;
name: string;
type: string;
diff --git a/src/views-components/project-explorer/project-explorer.tsx b/src/views-components/project-explorer/project-explorer.tsx
new file mode 100644
index 0000000..eee0033
--- /dev/null
+++ b/src/views-components/project-explorer/project-explorer.tsx
@@ -0,0 +1,173 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { DataExplorerColumn } from '../../components/data-explorer/data-explorer-column';
+import { ProjectExplorerItem } from './project-explorer-item';
+import { Grid, Typography } from '@material-ui/core';
+import { formatDate, formatFileSize } from '../../common/formatters';
+import DataExplorer from '../../components/data-explorer/data-explorer';
+
+export interface ProjectExplorerContextActions {
+ onAddToFavourite: (item: ProjectExplorerItem) => void;
+ onCopy: (item: ProjectExplorerItem) => void;
+ onDownload: (item: ProjectExplorerItem) => void;
+ onMoveTo: (item: ProjectExplorerItem) => void;
+ onRemove: (item: ProjectExplorerItem) => void;
+ onRename: (item: ProjectExplorerItem) => void;
+ onShare: (item: ProjectExplorerItem) => void;
+}
+
+interface ProjectExplorerProps {
+ items: ProjectExplorerItem[];
+}
+
+interface ProjectExplorerState {
+ columns: Array<DataExplorerColumn<ProjectExplorerItem>>;
+}
+
+class ProjectExplorer extends React.Component<ProjectExplorerProps, ProjectExplorerState> {
+ state: ProjectExplorerState = {
+ columns: [{
+ name: "Name",
+ selected: true,
+ sortDirection: "asc",
+ sortable: true,
+ render: renderName
+ }, {
+ name: "Status",
+ selected: true,
+ filterable: true,
+ filters: [{
+ name: "In progress",
+ selected: true
+ }, {
+ name: "Complete",
+ selected: true
+ }],
+ render: renderStatus
+ }, {
+ name: "Type",
+ selected: true,
+ filterable: true,
+ filters: [{
+ name: "Collection",
+ selected: true
+ }, {
+ name: "Group",
+ selected: true
+ }],
+ render: item => renderType(item.type)
+ }, {
+ name: "Owner",
+ selected: true,
+ render: item => renderOwner(item.owner)
+ }, {
+ name: "File size",
+ selected: true,
+ render: item => renderFileSize(item.fileSize)
+ }, {
+ name: "Last modified",
+ selected: true,
+ sortable: true,
+ render: item => renderDate(item.lastModified)
+ }]
+ };
+
+ contextMenuActions = [[{
+ icon: "fas fa-users fa-fw",
+ name: "Share",
+ onClick: console.log
+ }, {
+ icon: "fas fa-sign-out-alt fa-fw",
+ name: "Move to",
+ onClick: console.log
+ }, {
+ icon: "fas fa-star fa-fw",
+ name: "Add to favourite",
+ onClick: console.log
+ }, {
+ icon: "fas fa-edit fa-fw",
+ name: "Rename",
+ onClick: console.log
+ }, {
+ icon: "fas fa-copy fa-fw",
+ name: "Make a copy",
+ onClick: console.log
+ }, {
+ icon: "fas fa-download fa-fw",
+ name: "Download",
+ onClick: console.log
+ }], [{
+ icon: "fas fa-trash-alt fa-fw",
+ name: "Remove",
+ onClick: console.log
+ }
+ ]];
+
+ render() {
+ return <DataExplorer
+ items={this.props.items}
+ columns={this.state.columns}
+ contextActions={this.contextMenuActions}
+ onColumnToggle={console.log}
+ onFiltersChange={console.log}
+ onRowClick={console.log}
+ onSortingToggle={console.log} />;
+ }
+}
+
+const renderName = (item: ProjectExplorerItem) =>
+ <Grid
+ container
+ alignItems="center"
+ wrap="nowrap"
+ spacing={16}>
+ <Grid item>
+ {renderIcon(item)}
+ </Grid>
+ <Grid item>
+ <Typography color="primary">
+ {item.name}
+ </Typography>
+ </Grid>
+ </Grid>;
+
+const renderIcon = (item: ProjectExplorerItem) => {
+ switch (item.type) {
+ case "arvados#group":
+ return <i className="fas fa-folder fa-lg" />;
+ case "arvados#groupList":
+ return <i className="fas fa-th fa-lg" />;
+ default:
+ return <i />;
+ }
+};
+
+const renderDate = (date: string) =>
+ <Typography noWrap>
+ {formatDate(date)}
+ </Typography>;
+
+const renderFileSize = (fileSize?: number) =>
+ <Typography noWrap>
+ {formatFileSize(fileSize)}
+ </Typography>;
+
+const renderOwner = (owner: string) =>
+ <Typography noWrap color="primary">
+ {owner}
+ </Typography>;
+
+const renderType = (type: string) =>
+ <Typography noWrap>
+ {type}
+ </Typography>;
+
+const renderStatus = (item: ProjectExplorerItem) =>
+ <Typography noWrap align="center">
+ {item.status || "-"}
+ </Typography>;
+
+export default ProjectExplorer;
diff --git a/src/views/data-explorer/data-explorer-selectors.ts b/src/views/data-explorer/data-explorer-selectors.ts
deleted file mode 100644
index 5f17037..0000000
--- a/src/views/data-explorer/data-explorer-selectors.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { TreeItem } from "../../components/tree/tree";
-import { Project } from "../../models/project";
-import { DataItem } from "../../views-components/data-explorer/data-item";
-
-export const mapProjectTreeItem = (item: TreeItem<Project>): DataItem => ({
- name: item.data.name,
- type: item.data.kind,
- owner: item.data.ownerUuid,
- lastModified: item.data.modifiedAt,
- uuid: item.data.uuid
-});
diff --git a/src/views/data-explorer/data-explorer.tsx b/src/views/data-explorer/data-explorer.tsx
deleted file mode 100644
index f4ee36f..0000000
--- a/src/views/data-explorer/data-explorer.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import * as React from 'react';
-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 { DataColumns } from "../../components/data-table/data-table";
-import DataExplorer, { DataExplorerContextActions } from "../../views-components/data-explorer/data-explorer";
-import { mapProjectTreeItem } from "./data-explorer-selectors";
-import { DataItem } from "../../views-components/data-explorer/data-item";
-
-interface DataExplorerViewDataProps {
- projects: ProjectState;
-}
-
-type DataExplorerViewProps = DataExplorerViewDataProps & RouteComponentProps<{ name: string }> & DispatchProp;
-type DataExplorerViewState = DataColumns<Project>;
-
-class DataExplorerView extends React.Component<DataExplorerViewProps, DataExplorerViewState> {
-
- render() {
- const project = findTreeItem(this.props.projects, this.props.match.params.name);
- const projectItems = project && project.items || [];
- return (
- <DataExplorer
- items={projectItems.map(mapProjectTreeItem)}
- onItemClick={this.goToProject}
- contextActions={this.contextActions}
- />
- );
- }
-
- contextActions: DataExplorerContextActions = {
- onAddToFavourite: console.log,
- onCopy: console.log,
- onDownload: console.log,
- onMoveTo: console.log,
- onRemove: console.log,
- onRename: console.log,
- onShare: console.log
- };
-
- goToProject = (item: DataItem) => {
- this.props.dispatch(push(`/project/${item}`));
- this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(item.uuid));
- }
-}
-
-export default connect(
- (state: RootState) => ({
- projects: state.projects
- })
-)(DataExplorerView);
diff --git a/src/views/project-panel/project-panel-selectors.ts b/src/views/project-panel/project-panel-selectors.ts
new file mode 100644
index 0000000..610f2fa
--- /dev/null
+++ b/src/views/project-panel/project-panel-selectors.ts
@@ -0,0 +1,15 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { TreeItem } from "../../components/tree/tree";
+import { Project } from "../../models/project";
+import { ProjectExplorerItem } from "../../views-components/project-explorer/project-explorer-item";
+
+export const mapProjectTreeItem = (item: TreeItem<Project>): ProjectExplorerItem => ({
+ name: item.data.name,
+ type: item.data.kind,
+ owner: item.data.ownerUuid,
+ lastModified: item.data.modifiedAt,
+ uuid: item.data.uuid
+});
diff --git a/src/views/project-panel/project-panel.tsx b/src/views/project-panel/project-panel.tsx
new file mode 100644
index 0000000..f9e6c8b
--- /dev/null
+++ b/src/views/project-panel/project-panel.tsx
@@ -0,0 +1,34 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+import { DispatchProp, connect } from 'react-redux';
+import { ProjectState, findTreeItem } from '../../store/project/project-reducer';
+import ProjectExplorer from '../../views-components/project-explorer/project-explorer';
+import { RootState } from '../../store/store';
+import { mapProjectTreeItem } from './project-panel-selectors';
+
+interface ProjectPanelDataProps {
+ projects: ProjectState;
+}
+
+type ProjectPanelProps = ProjectPanelDataProps & RouteComponentProps<{ name: string }> & DispatchProp;
+
+class ProjectPanel extends React.Component<ProjectPanelProps> {
+
+ render() {
+ const project = findTreeItem(this.props.projects, this.props.match.params.name);
+ const projectItems = project && project.items || [];
+ return (
+ <ProjectExplorer items={projectItems.map(mapProjectTreeItem)} />
+ );
+ }
+}
+
+export default connect(
+ (state: RootState) => ({
+ projects: state.projects
+ })
+)(ProjectPanel);
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 41725b5..bac0b47 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -19,7 +19,7 @@ import ProjectTree from '../../views-components/project-tree/project-tree';
import { TreeItem, TreeItemStatus } from "../../components/tree/tree";
import { Project } from "../../models/project";
import { getTreePath } from '../../store/project/project-reducer';
-import DataExplorer from '../data-explorer/data-explorer';
+import ProjectPanel from '../project-panel/project-panel';
const drawerWidth = 240;
const appBarHeight = 102;
@@ -183,7 +183,7 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
<main className={classes.contentWrapper}>
<div className={classes.content}>
<Switch>
- <Route path="/project/:name" component={DataExplorer} />
+ <Route path="/project/:name" component={ProjectPanel} />
</Switch>
</div>
</main>
diff --git a/yarn.lock b/yarn.lock
index 05a6ef1..9a3379b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -149,18 +149,12 @@
dependencies:
"@types/react" "*"
-"@types/react@*":
+"@types/react@*", "@types/react at 16.3":
version "16.3.18"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.3.18.tgz#bf195aed4d77dc86f06e4c9bb760214a3b822b8d"
dependencies:
csstype "^2.2.0"
-"@types/react at 16.4.1":
- version "16.4.1"
- resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.1.tgz#c53bbfb4a78933db587da085ac60dbf5fcf73f8f"
- dependencies:
- csstype "^2.2.0"
-
"@types/redux-devtools at 3.0.44":
version "3.0.44"
resolved "https://registry.yarnpkg.com/@types/redux-devtools/-/redux-devtools-3.0.44.tgz#2781b87067b8aec3102d4cb4a478feb340df5259"
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list