[ARVADOS-WORKBENCH2] updated: 1.1.4-62-g6471df4
Git user
git at public.curoverse.com
Thu Jun 14 06:48:12 EDT 2018
Summary of changes:
.../columns-configurator/columns-configurator.tsx | 25 +++++++++-----
.../project-explorer/project-explorer.tsx | 34 +++++++-----------
src/views/project-explorer/project-explorer.tsx | 40 +++-------------------
3 files changed, 34 insertions(+), 65 deletions(-)
copy src/{views => components}/project-explorer/project-explorer.tsx (68%)
via 6471df421940db8b44adc93171a27659f7e3bdf1 (commit)
via d183e99c2202a1bfce258af2fe96a6cb1d08cad7 (commit)
from 7adbd161925c71840bf4ddb799b87f1734e5af7e (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 6471df421940db8b44adc93171a27659f7e3bdf1
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Thu Jun 14 12:47:56 2018 +0200
Seaparate project-explorer component from project-explorer view
Feature #13601
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/views/project-explorer/project-explorer.tsx b/src/components/project-explorer/project-explorer.tsx
similarity index 68%
copy from src/views/project-explorer/project-explorer.tsx
copy to src/components/project-explorer/project-explorer.tsx
index 21e8d27..490e46f 100644
--- a/src/views/project-explorer/project-explorer.tsx
+++ b/src/components/project-explorer/project-explorer.tsx
@@ -14,17 +14,16 @@ import projectActions from "../../store/project/project-action";
import { Typography } from '@material-ui/core';
import { Column } from '../../components/data-explorer/column';
-interface ProjectExplorerViewDataProps {
- projects: ProjectState;
+interface ProjectExplorerProps {
+ projects: Project[];
+ onProjectClick: (project: Project) => void;
}
-type ProjectExplorerViewProps = ProjectExplorerViewDataProps & RouteComponentProps<{ name: string }> & DispatchProp;
+type ProjectExplorerState = Pick<DataExplorerProps<Project>, "columns">;
-type ProjectExplorerViewState = Pick<DataExplorerProps<Project>, "columns">;
+class ProjectExplorer extends React.Component<ProjectExplorerProps, ProjectExplorerState> {
-class ProjectExplorerView extends React.Component<ProjectExplorerViewProps, ProjectExplorerViewState> {
-
- state: ProjectExplorerViewState = {
+ 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> },
@@ -36,19 +35,16 @@ class ProjectExplorerView extends React.Component<ProjectExplorerViewProps, Proj
};
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} />
+ <DataExplorer
+ columns={this.state.columns}
+ items={this.props.projects}
+ onItemClick={this.props.onProjectClick}
+ onColumnToggle={this.toggleColumn}
+ />
);
}
-
- 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);
@@ -73,8 +69,4 @@ const renderIcon = (kind: string) => {
}
};
-export default connect(
- (state: RootState) => ({
- projects: state.projects
- })
-)(ProjectExplorerView);
+export default ProjectExplorer;
diff --git a/src/views/project-explorer/project-explorer.tsx b/src/views/project-explorer/project-explorer.tsx
index 21e8d27..de91c0b 100644
--- 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
commit d183e99c2202a1bfce258af2fe96a6cb1d08cad7
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Thu Jun 14 12:30:30 2018 +0200
Change column configurator icon, make column list more dense
Feature #13601
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/data-explorer/columns-configurator/columns-configurator.tsx b/src/components/data-explorer/columns-configurator/columns-configurator.tsx
index e4accbe..5a3fb01 100644
--- a/src/components/data-explorer/columns-configurator/columns-configurator.tsx
+++ b/src/components/data-explorer/columns-configurator/columns-configurator.tsx
@@ -3,8 +3,8 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { WithStyles, StyleRulesCallback, Theme, withStyles, IconButton, Popover, Paper, List, Checkbox, ListItemText, ListItem } from '@material-ui/core';
-import ColumnsIcon from "@material-ui/icons/ViewWeek";
+import { WithStyles, StyleRulesCallback, Theme, withStyles, IconButton, Popover, Paper, List, Checkbox, ListItemText, ListItem, Typography, ListSubheader } from '@material-ui/core';
+import MenuIcon from "@material-ui/icons/Menu";
import { Column } from '../column';
import { PopoverOrigin } from '@material-ui/core/Popover';
@@ -26,10 +26,10 @@ class ColumnsConfigurator extends React.Component<ColumnsConfiguratorProps & Wit
};
render() {
- const { columns, onColumnToggle } = this.props;
+ const { columns, onColumnToggle, classes } = this.props;
return (
<>
- <IconButton onClick={this.handleClick}><ColumnsIcon /></IconButton>
+ <IconButton onClick={this.handleClick}><MenuIcon /></IconButton>
<Popover
anchorEl={this.state.anchorEl}
open={Boolean(this.state.anchorEl)}
@@ -38,11 +38,14 @@ class ColumnsConfigurator extends React.Component<ColumnsConfiguratorProps & Wit
anchorOrigin={this.transformOrigin}
>
<Paper>
- <List>
+ <List dense>
+ <ListSubheader>
+ Configure table columns
+ </ListSubheader>
{
columns.map((column, index) => (
- <ListItem dense key={index} button onClick={() => onColumnToggle(column)}>
- <Checkbox disableRipple color="primary" checked={column.selected}/>
+ <ListItem key={index} button onClick={() => onColumnToggle(column)}>
+ <Checkbox disableRipple color="primary" checked={column.selected} className={classes.checkbox} />
<ListItemText>{column.header}</ListItemText>
</ListItem>
@@ -65,10 +68,14 @@ class ColumnsConfigurator extends React.Component<ColumnsConfiguratorProps & Wit
}
-type CssRules = "root";
+type CssRules = "root" | "checkbox";
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
- root: {}
+ root: {},
+ checkbox: {
+ width: 24,
+ height: 24
+ }
});
export default withStyles(styles)(ColumnsConfigurator);
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list