[ARVADOS-WORKBENCH2] updated: 1.1.4-15-gb57a24f
Git user
git at public.curoverse.com
Tue Jun 12 16:57:07 EDT 2018
Summary of changes:
package.json | 3 +-
src/components/project-tree/project-tree.test.tsx | 34 ++++++++++----
src/components/project-tree/project-tree.tsx | 24 ++++++----
src/components/tree/tree.tsx | 18 +++----
src/index.tsx | 18 -------
src/models/project.ts | 1 -
src/services/project-service/project-service.ts | 2 +-
src/store/project-action.ts | 14 ------
src/store/project-reducer.ts | 57 -----------------------
src/store/project/project-action.ts | 2 +-
src/store/project/project-reducer.test.ts | 2 +-
src/store/project/project-reducer.ts | 37 +++++++++++----
src/views/workbench/workbench.tsx | 18 ++++---
yarn.lock | 15 ++----
14 files changed, 93 insertions(+), 152 deletions(-)
delete mode 100644 src/store/project-action.ts
delete mode 100644 src/store/project-reducer.ts
via b57a24f2a59938be52c78d453dea00d5cd54720d (commit)
from eeb82d50816250cc6287928e6d958affa73880ee (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 b57a24f2a59938be52c78d453dea00d5cd54720d
Author: Daniel Kos <daniel.kos at contractors.roche.com>
Date: Tue Jun 12 22:56:58 2018 +0200
Post merge fixes, connected tree with projects from the server
Arvados-DCO-1.1-Signed-off-by: Daniel Kos <daniel.kos at contractors.roche.com>
diff --git a/package.json b/package.json
index 399750a..967faf7 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,9 @@
"dependencies": {
"@material-ui/core": "1.2.0",
"@material-ui/icons": "^1.1.0",
- "lodash": "4.17.10",
+ "@types/lodash": "^4.14.109",
"axios": "0.18.0",
+ "lodash": "4.17.10",
"react": "16.4.0",
"react-dom": "16.4.0",
"react-redux": "5.0.7",
diff --git a/src/components/project-tree/project-tree.test.tsx b/src/components/project-tree/project-tree.test.tsx
index 03bf44f..d42df08 100644
--- a/src/components/project-tree/project-tree.test.tsx
+++ b/src/components/project-tree/project-tree.test.tsx
@@ -3,8 +3,7 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { shallow, mount, render } from 'enzyme';
+import { mount } from 'enzyme';
import * as Enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';
import ListItemIcon from '@material-ui/core/ListItemIcon';
@@ -22,12 +21,15 @@ describe("ProjectTree component", () => {
data: {
name: "sample name",
createdAt: "2018-06-12",
- icon: <i className="fas fa-th" />
+ modifiedAt: "2018-06-13",
+ uuid: "uuid",
+ ownerUuid: "ownerUuid",
+ href: "href",
},
id: "3",
open: true,
active: true
- }
+ };
const wrapper = mount(<ProjectTree projects={[project]} toggleProjectTreeItem={() => { }} />);
expect(wrapper.find(ListItemIcon).length).toEqual(1);
@@ -39,7 +41,10 @@ describe("ProjectTree component", () => {
data: {
name: "sample name",
createdAt: "2018-06-12",
- icon: <i className="fas fa-th" />
+ modifiedAt: "2018-06-13",
+ uuid: "uuid",
+ ownerUuid: "ownerUuid",
+ href: "href",
},
id: "3",
open: false,
@@ -49,13 +54,16 @@ describe("ProjectTree component", () => {
data: {
name: "sample name",
createdAt: "2018-06-12",
- icon: <i className="fas fa-th" />
+ modifiedAt: "2018-06-13",
+ uuid: "uuid",
+ ownerUuid: "ownerUuid",
+ href: "href",
},
id: "3",
open: false,
active: true
}
- ]
+ ];
const wrapper = mount(<ProjectTree projects={project} toggleProjectTreeItem={() => { }} />);
expect(wrapper.find(ListItemIcon).length).toEqual(2);
@@ -66,7 +74,10 @@ describe("ProjectTree component", () => {
data: {
name: "sample name",
createdAt: "2018-06-12",
- icon: <i className="fas fa-th" />
+ modifiedAt: "2018-06-13",
+ uuid: "uuid",
+ ownerUuid: "ownerUuid",
+ href: "href",
},
id: "3",
open: true,
@@ -76,14 +87,17 @@ describe("ProjectTree component", () => {
data: {
name: "sample name",
createdAt: "2018-06-12",
- icon: <i className="fas fa-th" />
+ modifiedAt: "2018-06-13",
+ uuid: "uuid",
+ ownerUuid: "ownerUuid",
+ href: "href",
},
id: "4",
open: false,
active: true
}
]
- }
+ };
const wrapper = mount(<ProjectTree projects={[project]} toggleProjectTreeItem={() => { }} />);
wrapper.setState({open: true });
diff --git a/src/components/project-tree/project-tree.tsx b/src/components/project-tree/project-tree.tsx
index 310dced..5243b5e 100644
--- a/src/components/project-tree/project-tree.tsx
+++ b/src/components/project-tree/project-tree.tsx
@@ -35,12 +35,12 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
}
});
-export interface WorkbenchProps {
+export interface ProjectTreeProps {
projects: Array<TreeItem<Project>>;
- toggleProjectTreeItem: (id: string) => any;
+ toggleProjectTreeItem: (id: string) => void;
}
-class ProjectTree<T> extends React.Component<WorkbenchProps & WithStyles<CssRules>> {
+class ProjectTree<T> extends React.Component<ProjectTreeProps & WithStyles<CssRules>> {
render(): ReactElement<any> {
const {classes, projects} = this.props;
const {active, listItemText, row, treeContainer} = classes;
@@ -48,13 +48,21 @@ class ProjectTree<T> extends React.Component<WorkbenchProps & WithStyles<CssRule
<div className={treeContainer}>
<Tree items={projects}
toggleItem={this.props.toggleProjectTreeItem}
- render={(project: TreeItem<Project>) => <span className={row}>
- <ListItemIcon className={project.active ? active : ''}>{project.data.icon}</ListItemIcon>
- <ListItemText className={listItemText} primary={<Typography className={project.active ? active : ''}>{project.data.name}</Typography>} />
- </span>} />
+ render={(project: TreeItem<Project>, level: number) =>
+ <span className={row}>
+ <ListItemIcon className={project.active ? active : ''}>
+ {level === 0 ? <i className="fas fa-th"/> : <i className="fas fa-folder"/>}
+ </ListItemIcon>
+ <ListItemText className={listItemText} primary={
+ <Typography className={project.active ? active : ''}>
+ {project.data.name}
+ </Typography>
+ }/>
+ </span>
+ }/>
</div>
);
}
}
-export default withStyles(styles)(ProjectTree)
\ No newline at end of file
+export default withStyles(styles)(ProjectTree)
diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx
index fdde3c1..3a64473 100644
--- a/src/components/tree/tree.tsx
+++ b/src/components/tree/tree.tsx
@@ -13,11 +13,11 @@ type CssRules = 'list' | 'activeArrow' | 'arrow' | 'arrowRotate';
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
list: {
- paddingBottom: '3px',
+ paddingBottom: '3px',
paddingTop: '3px',
},
activeArrow: {
- color: '#4285F6',
+ color: '#4285F6',
position: 'absolute',
},
arrow: {
@@ -38,7 +38,7 @@ export interface TreeItem<T> {
interface TreeProps<T> {
items?: Array<TreeItem<T>>;
- render: (item: TreeItem<T>) => ReactElement<{}>;
+ render: (item: TreeItem<T>, level?: number) => ReactElement<{}>;
toggleItem: (id: string) => any;
level?: number;
}
@@ -50,17 +50,17 @@ class Tree<T> extends React.Component<TreeProps<T> & WithStyles<CssRules>, {}> {
render(): ReactElement<any> {
const level = this.props.level ? this.props.level : 0;
const {classes, render, toggleItem, items} = this.props;
- const {list, arrow, activeArrow, arrowRotate} = classes;
+ const {list, arrow, activeArrow} = classes;
return <List component="div" className={list}>
{items && items.map((it: TreeItem<T>, idx: number) =>
- <div key={`item/${level}/${idx}`}>
- <ListItem button onClick={() => toggleItem(it.id)} className={list} style={{paddingLeft: (level + 1) * 20}}>
- {it.active ? this.renderArrow(it.items, activeArrow, it.open) : this.renderArrow(it.items, arrow, it.open)}
- {render(it)}
+ <div key={`item/${level}/${idx}`}>
+ <ListItem button onClick={() => toggleItem(it.id)} className={list} style={{paddingLeft: (level + 1) * 20}}>
+ {this.renderArrow(it.items, it.active ? activeArrow : arrow, it.open)}
+ {render(it, level)}
</ListItem>
{it.items && it.items.length > 0 &&
<Collapse in={it.open} timeout="auto" unmountOnExit>
- <StyledTree
+ <StyledTree
items={it.items}
render={render}
toggleItem={toggleItem}
diff --git a/src/index.tsx b/src/index.tsx
index 1732968..351ed2e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -15,25 +15,8 @@ import { ConnectedRouter } from "react-router-redux";
import ApiToken from "./components/api-token/api-token";
import authActions from "./store/auth/auth-action";
import { projectService } from "./services/services";
-import { TreeItem } from "./components/tree/tree";
-import { Project } from "./models/project";
-function buildProjectTree(tree: any[], level = 0): Array<TreeItem<Project>> {
- const projects = tree.map((t, idx) => ({
- id: `l${level}i${idx}${t[0]}`,
- open: false,
- active: false,
- data: {
- name: t[0],
- icon: level === 0 ? <i className="fas fa-th"/> : <i className="fas fa-folder"/>,
- createdAt: '2018-05-05',
- },
- items: t.length > 1 ? buildProjectTree(t[1], level + 1) : []
- }));
- return projects;
-}
const history = createBrowserHistory();
-const projects = buildProjectTree(sampleProjects);
const store = configureStore({
projects: [
@@ -49,7 +32,6 @@ const store = configureStore({
store.dispatch(authActions.INIT());
store.dispatch<any>(projectService.getProjectList());
-
const App = () =>
<Provider store={store}>
<ConnectedRouter history={history}>
diff --git a/src/models/project.ts b/src/models/project.ts
index f4faf7d..83fb59b 100644
--- a/src/models/project.ts
+++ b/src/models/project.ts
@@ -9,5 +9,4 @@ export interface Project {
uuid: string;
ownerUuid: string;
href: string;
- icon?: any;
}
diff --git a/src/services/project-service/project-service.ts b/src/services/project-service/project-service.ts
index 87272d4..2b1bcff 100644
--- a/src/services/project-service/project-service.ts
+++ b/src/services/project-service/project-service.ts
@@ -50,7 +50,7 @@ export default class ProjectService {
uuid: g.uuid,
ownerUuid: g.owner_uuid
} as Project));
- dispatch(actions.PROJECTS_SUCCESS(projects));
+ dispatch(actions.PROJECTS_SUCCESS({projects, parentItemId: parentUuid}));
});
};
}
diff --git a/src/store/project-action.ts b/src/store/project-action.ts
deleted file mode 100644
index 7cd3bac..0000000
--- a/src/store/project-action.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import { ActionType, createStandardAction } from "typesafe-actions";
-import { Project } from "../models/project";
-
-export const actions = {
- createProject: createStandardAction('@@project/create')<Project>(),
- removeProject: createStandardAction('@@project/remove')<string>(),
- toggleProjectTreeItem: createStandardAction('@@project/toggleTreeItem')<string>()
-};
-
-export type ProjectAction = ActionType<typeof actions>;
diff --git a/src/store/project-reducer.ts b/src/store/project-reducer.ts
deleted file mode 100644
index 42442ba..0000000
--- a/src/store/project-reducer.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import { getType } from "typesafe-actions";
-import { Project } from "../models/project";
-import { actions, ProjectAction } from "./project-action";
-import { TreeItem } from "../components/tree/tree";
-import * as _ from 'lodash';
-
-type ProjectState = Array<TreeItem<Project>>;
-
-function findTreeItem<T>(tree: Array<TreeItem<T>>, itemId: string): TreeItem<T> | undefined {
- let item;
- for (const t of tree) {
- item = t.id === itemId
- ? t
- : findTreeItem(t.items ? t.items : [], itemId);
- if (item) {
- break;
- }
- }
- return item;
-}
-
-function resetTreeActivity<T>(tree: Array<TreeItem<T>>): boolean | undefined {
- let item;
- for (const leaf of tree) {
- item = leaf.active === true
- ? leaf.active = false
- : resetTreeActivity(leaf.items ? leaf.items : []);
- }
- return item;
-}
-
-const projectsReducer = (state: ProjectState = [], action: ProjectAction) => {
- switch (action.type) {
- case getType(actions.createProject): {
- return [...state, action.payload];
- }
- case getType(actions.toggleProjectTreeItem): {
- const tree = _.cloneDeep(state);
- const itemId = action.payload;
- resetTreeActivity(tree);
- const item = findTreeItem(tree, itemId);
- if (item) {
- item.open = !item.open;
- item.active = true;
- }
- return tree;
- }
- default:
- return state;
- }
-};
-
-export default projectsReducer;
diff --git a/src/store/project/project-action.ts b/src/store/project/project-action.ts
index 2101619..87ecbda 100644
--- a/src/store/project/project-action.ts
+++ b/src/store/project/project-action.ts
@@ -9,7 +9,7 @@ const actions = unionize({
CREATE_PROJECT: ofType<Project>(),
REMOVE_PROJECT: ofType<string>(),
PROJECTS_REQUEST: {},
- PROJECTS_SUCCESS: ofType<Project[]>(),
+ PROJECTS_SUCCESS: ofType<{ projects: Project[], parentItemId?: string }>(),
TOGGLE_PROJECT_TREE_ITEM: ofType<string>()
}, {
tag: 'type',
diff --git a/src/store/project/project-reducer.test.ts b/src/store/project/project-reducer.test.ts
index 0bcf942..e067158 100644
--- a/src/store/project/project-reducer.test.ts
+++ b/src/store/project/project-reducer.test.ts
@@ -33,7 +33,7 @@ describe('project-reducer', () => {
};
const projects = [project, project];
- const state = projectsReducer(initialState, actions.PROJECTS_SUCCESS(projects));
+ const state = projectsReducer(initialState, actions.PROJECTS_SUCCESS({projects, parentItemId: undefined}));
expect(state).toEqual(projects);
});
});
diff --git a/src/store/project/project-reducer.ts b/src/store/project/project-reducer.ts
index 458177c..887cf89 100644
--- a/src/store/project/project-reducer.ts
+++ b/src/store/project/project-reducer.ts
@@ -22,23 +22,42 @@ function findTreeItem<T>(tree: Array<TreeItem<T>>, itemId: string): TreeItem<T>
return item;
}
-function resetTreeActivity<T>(tree: Array<TreeItem<T>>): boolean | undefined {
- let item;
- for (const leaf of tree) {
- item = leaf.active === true
- ? leaf.active = false
- : resetTreeActivity(leaf.items ? leaf.items : []);
+function resetTreeActivity<T>(tree: Array<TreeItem<T>>) {
+ for (const t of tree) {
+ t.active = false;
+ resetTreeActivity(t.items ? t.items : []);
}
- return item;
}
+function updateProjectTree(tree: Array<TreeItem<Project>>, projects: Project[], parentItemId?: string): Array<TreeItem<Project>> {
+ let treeItem;
+ if (parentItemId) {
+ treeItem = findTreeItem(tree, parentItemId);
+ }
+ const items = projects.map((p, idx) => ({
+ id: p.uuid,
+ open: false,
+ active: false,
+ data: p,
+ items: []
+ } as TreeItem<Project>));
+
+ if (treeItem) {
+ treeItem.items = items;
+ return tree;
+ }
+
+ return items;
+}
+
+
const projectsReducer = (state: ProjectState = [], action: ProjectAction) => {
return actions.match(action, {
CREATE_PROJECT: project => [...state, project],
REMOVE_PROJECT: () => state,
PROJECTS_REQUEST: () => state,
- PROJECTS_SUCCESS: projects => {
- return projects;
+ PROJECTS_SUCCESS: ({ projects, parentItemId }) => {
+ return updateProjectTree(state, projects, parentItemId);
},
TOGGLE_PROJECT_TREE_ITEM: itemId => {
const tree = _.cloneDeep(state);
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 7cccfe3..00fab70 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -10,8 +10,6 @@ import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import { connect, DispatchProp } from "react-redux";
-import Tree from "../../components/tree/tree";
-import { Project } from "../../models/project";
import ProjectList from "../../components/project-list/project-list";
import { Route, Switch } from "react-router";
import { Link } from "react-router-dom";
@@ -24,9 +22,11 @@ import { AccountCircle } from "@material-ui/icons";
import { User } from "../../models/user";
import Grid from "@material-ui/core/Grid/Grid";
import { RootState } from "../../store/store";
+import projectActions from "../../store/project/project-action"
-import { actions as projectActions } from "../../store/project-action";
-import ProjectTree, { WorkbenchProps } from '../../components/project-tree/project-tree';
+import ProjectTree from '../../components/project-tree/project-tree';
+import { TreeItem } from "../../components/tree/tree";
+import { Project } from "../../models/project";
const drawerWidth = 240;
@@ -61,7 +61,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
});
interface WorkbenchDataProps {
- projects: Project[];
+ projects: Array<TreeItem<Project>>;
user?: User;
}
@@ -157,9 +157,9 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
paper: classes.drawerPaper,
}}>
<div className={classes.toolbar}/>
- <ProjectTree
+ <ProjectTree
projects={this.props.projects}
- toggleProjectTreeItem={this.props.toggleProjectTreeItem}/>
+ toggleProjectTreeItem={itemId => this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(itemId))}/>
</Drawer>}
<main className={classes.content}>
<div className={classes.toolbar}/>
@@ -176,9 +176,7 @@ export default connect<WorkbenchDataProps>(
(state: RootState) => ({
projects: state.projects,
user: state.auth.user
- }){
- toggleProjectTreeItem: (id: string) => projectActions.toggleProjectTreeItem(id)
- }
+ })
)(
withStyles(styles)(Workbench)
);
diff --git a/yarn.lock b/yarn.lock
index f3950fa..309773f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -93,7 +93,7 @@
csstype "^2.0.0"
indefinite-observable "^1.0.1"
-"@types/lodash at 4.14.109":
+"@types/lodash@^4.14.109":
version "4.14.109"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.109.tgz#b1c4442239730bf35cabaf493c772b18c045886d"
@@ -2445,7 +2445,7 @@ error-ex@^1.2.0:
dependencies:
is-arrayish "^0.2.1"
-es-abstract@^1.5.1, es-abstract@^1.7.0:
+es-abstract@^1.5.1, es-abstract@^1.6.1, es-abstract@^1.7.0:
version "1.12.0"
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.12.0.tgz#9dbbdd27c6856f0001421ca18782d786bf8a6165"
dependencies:
@@ -3027,7 +3027,7 @@ fsevents@^1.0.0, fsevents@^1.1.2, fsevents@^1.1.3, fsevents@^1.2.3:
nan "^2.9.2"
node-pre-gyp "^0.10.0"
-function-bind@^1.1.1:
+function-bind@^1.1.0, function-bind@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
@@ -6226,15 +6226,6 @@ react-scripts-ts at 2.16.0:
optionalDependencies:
fsevents "^1.1.3"
-react-scrollbar-size@^2.0.2:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/react-scrollbar-size/-/react-scrollbar-size-2.1.0.tgz#105e797135cab92b1f9e16f00071db7f29f80754"
- dependencies:
- babel-runtime "^6.26.0"
- prop-types "^15.6.0"
- react-event-listener "^0.5.1"
- stifle "^1.0.2"
-
react-test-renderer@^16.0.0-0:
version "16.4.0"
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.4.0.tgz#0dbe0e24263e94e1830c7afb1f403707fad313a3"
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list