interface TreeProps<T> {
items?: Array<TreeItem<T>>;
render: (item: TreeItem<T>, level?: number) => ReactElement<{}>;
- toggleItem: (id: string, status: TreeItemStatus) => any;
+ toggleItem: (itemId: string) => any;
level?: number;
}
class Tree<T> extends React.Component<TreeProps<T> & WithStyles<CssRules>, {}> {
renderArrow(status: TreeItemStatus, arrowClass: string, open: boolean, id: string) {
return <i
- onClick={() => this.props.toggleItem(id, status)}
+ onClick={() => this.props.toggleItem(id)}
className={`
- ${arrowClass}
- ${status === TreeItemStatus.Pending ? this.props.classes.arrowVisibility : ''}
+ ${arrowClass}
+ ${status === TreeItemStatus.Pending ? this.props.classes.arrowVisibility : ''}
${open ? `fas fa-caret-down ${this.props.classes.arrowTransition}` : `fas fa-caret-down ${this.props.classes.arrowRotate}`}`} />;
}
render(): ReactElement<any> {
const history = createBrowserHistory();
const store = configureStore({
- projects: [
- ],
+ projects: {
+ items: [],
+ currentItemId: ""
+ },
collections: [
],
router: {
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
export interface Resource {
name: string;
createdAt: string;
uuid: string;
ownerUuid: string;
href: string;
- kind: string;
+ kind: ResourceKind;
}
export enum ResourceKind {
import FilterBuilder, { FilterField } from "../../common/api/filter-builder";
import { ArvadosResource } from "../response";
import { Collection } from "../../models/collection";
+import { getResourceKind } from "../../models/resource";
interface CollectionResource extends ArvadosResource {
name: string;
href: g.href,
uuid: g.uuid,
ownerUuid: g.owner_uuid,
- kind: g.kind
+ kind: getResourceKind(g.kind)
} as Collection));
return collections;
});
import { Project } from "../../models/project";
import FilterBuilder, { FilterField } from "../../common/api/filter-builder";
import { ArvadosResource } from "../response";
+import { getResourceKind } from "../../models/resource";
interface GroupResource extends ArvadosResource {
name: string;
href: g.href,
uuid: g.uuid,
ownerUuid: g.owner_uuid,
- kind: g.kind
+ kind: getResourceKind(g.kind)
} as Project));
return projects;
});
import collectionsReducer from "./collection-reducer";
import actions from "./collection-action";
+import { ResourceKind } from "../../models/resource";
describe('collection-reducer', () => {
it('should add new collection to the list', () => {
modifiedAt: '2018-01-01',
ownerUuid: 'owner-test123',
uuid: 'test123',
- kind: ""
+ kind: ResourceKind.COLLECTION
};
const state = collectionsReducer(initialState, actions.CREATE_COLLECTION(collection));
modifiedAt: '2018-01-01',
ownerUuid: 'owner-test123',
uuid: 'test123',
- kind: ""
+ kind: ResourceKind.COLLECTION
};
const collections = [collection, collection];
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { Dispatch } from "redux";
+import projectActions, { getProjectList } from "../project/project-action";
+import { push } from "react-router-redux";
+import { TreeItem, TreeItemStatus } from "../../components/tree/tree";
+import { getCollectionList } from "../collection/collection-action";
+import { findTreeItem } from "../project/project-reducer";
+import { Project } from "../../models/project";
+import { Resource, ResourceKind } from "../../models/resource";
+
+export const getResourceUrl = (resource: Resource): string => {
+ switch (resource.kind) {
+ case ResourceKind.LEVEL_UP: return `/projects/${resource.ownerUuid}`;
+ case ResourceKind.PROJECT: return `/projects/${resource.uuid}`;
+ case ResourceKind.COLLECTION: return `/collections/${resource.uuid}`;
+ default:
+ return "#";
+ }
+};
+
+export const setProjectItem = (projects: Array<TreeItem<Project>>, itemId: string, itemKind: ResourceKind) => (dispatch: Dispatch) => {
+
+ const openProjectItem = (resource: Resource) => {
+ dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(resource.uuid));
+ dispatch(push(getResourceUrl({...resource, kind: itemKind})));
+ };
+ const treeItem = findTreeItem(projects, itemId);
+
+ if (treeItem) {
+ if (treeItem.status === TreeItemStatus.Loaded) {
+ openProjectItem(treeItem.data);
+ } else {
+ dispatch<any>(getProjectList(itemId))
+ .then(() => openProjectItem(treeItem.data));
+ }
+ dispatch<any>(getCollectionList(itemId));
+
+ // if (item.type === ResourceKind.PROJECT || item.type === ResourceKind.LEVEL_UP) {
+ // this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(item.uuid));
+ // }
+ // this.props.dispatch<any>(getCollectionList(item.uuid));
+
+ }
+};
import projectsReducer, { getTreePath } from "./project-reducer";
import actions from "./project-action";
import { TreeItem, TreeItemStatus } from "../../components/tree/tree";
+import { ResourceKind } from "../../models/resource";
describe('project-reducer', () => {
it('should add new project to the list', () => {
modifiedAt: '2018-01-01',
ownerUuid: 'owner-test123',
uuid: 'test123',
- kind: ""
+ kind: ResourceKind.PROJECT
};
const state = projectsReducer(initialState, actions.CREATE_PROJECT(project));
modifiedAt: '2018-01-01',
ownerUuid: 'owner-test123',
uuid: 'test123',
- kind: ""
+ kind: ResourceKind.PROJECT
};
const projects = [project, project];
import { TreeItem, TreeItemStatus } from "../../components/tree/tree";
import * as _ from "lodash";
-export type ProjectState = Array<TreeItem<Project>>;
+export type ProjectState = {
+ items: Array<TreeItem<Project>>,
+ currentItemId: string
+};
export function findTreeItem<T>(tree: Array<TreeItem<T>>, itemId: string): TreeItem<T> | undefined {
let item;
treeItem.status = TreeItemStatus.Loaded;
}
}
- const items = projects.map((p, idx) => ({
+ const items = projects.map(p => ({
id: p.uuid,
open: false,
active: false,
return items;
}
-const projectsReducer = (state: ProjectState = [], action: ProjectAction) => {
+const projectsReducer = (state: ProjectState = { items: [], currentItemId: "" }, action: ProjectAction) => {
return actions.match(action, {
- CREATE_PROJECT: project => [...state, project],
+ CREATE_PROJECT: project => ({
+ ...state,
+ items: state.items.concat({
+ id: project.uuid,
+ open: false,
+ active: false,
+ status: TreeItemStatus.Loaded,
+ toggled: false,
+ items: [],
+ data: project
+ })
+ }),
REMOVE_PROJECT: () => state,
PROJECTS_REQUEST: itemId => {
- const tree = _.cloneDeep(state);
- const item = findTreeItem(tree, itemId);
+ const items = _.cloneDeep(state.items);
+ const item = findTreeItem(items, itemId);
if (item) {
item.status = TreeItemStatus.Pending;
+ state.items = items;
}
- return tree;
+ return state;
},
PROJECTS_SUCCESS: ({ projects, parentItemId }) => {
- return updateProjectTree(state, projects, parentItemId);
+ return {
+ ...state,
+ items: updateProjectTree(state.items, projects, parentItemId)
+ };
},
TOGGLE_PROJECT_TREE_ITEM: itemId => {
- const tree = _.cloneDeep(state);
- resetTreeActivity(tree);
- const item = findTreeItem(tree, itemId);
+ const items = _.cloneDeep(state.items);
+ resetTreeActivity(items);
+ const item = findTreeItem(items, itemId);
if (item) {
item.open = !item.open;
item.active = true;
item.toggled = true;
}
- return tree;
+ return {
+ items,
+ currentItemId: itemId
+ };
},
default: () => state
});
}, {
name: "Type",
selected: true,
- render: item => renderType(item.type)
+ render: item => renderType(item.kind)
}, {
name: "Owner",
selected: true,
}
const renderIcon = (dataItem: DataItem) => {
- switch (dataItem.type) {
+ switch (dataItem.kind) {
case ResourceKind.LEVEL_UP:
return <i className="icon-level-up" style={{fontSize: "1rem"}}/>;
case ResourceKind.PROJECT:
export interface DataItem {
uuid: string;
name: string;
- type: ResourceKind;
+ kind: ResourceKind;
url: string;
owner: string;
lastModified: string;
return {
uuid: r.uuid,
name: r.name,
- type: kind ? kind : getResourceKind(r.kind),
+ kind: kind ? kind : getResourceKind(r.kind),
owner: r.ownerUuid,
lastModified: r.modifiedAt
};
export interface ProjectTreeProps {
projects: Array<TreeItem<Project>>;
- toggleProjectTreeItem: (id: string, status: TreeItemStatus) => void;
+ toggleProjectTreeItem: (itemId: string) => void;
}
class ProjectTree<T> extends React.Component<ProjectTreeProps & WithStyles<CssRules>> {
+// 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 { DataItem } from "../../views-components/data-explorer/data-item";
import { findTreeItem } from "../../store/project/project-reducer";
import { ResourceKind } from "../../models/resource";
import { Collection } from "../../models/collection";
-
+import { getResourceUrl } from "../../store/navigation/navigation-action";
export const projectExplorerItems = (projects: Array<TreeItem<Project>>, treeItemId: string, collections: Array<Collection>): DataItem[] => {
const dataItems: DataItem[] = [];
if (treeItem) {
dataItems.push({
name: "..",
- url: `/projects/${treeItem.data.ownerUuid}`,
- type: ResourceKind.LEVEL_UP,
+ url: getResourceUrl(treeItem.data),
+ kind: ResourceKind.LEVEL_UP,
owner: treeItem.data.ownerUuid,
uuid: treeItem.data.uuid,
lastModified: treeItem.data.modifiedAt
treeItem.items.forEach(p => {
const item = {
name: p.data.name,
- type: ResourceKind.PROJECT,
- url: `/projects/${treeItem.data.uuid}`,
+ kind: ResourceKind.PROJECT,
+ url: getResourceUrl(treeItem.data),
owner: p.data.ownerUuid,
uuid: p.data.uuid,
lastModified: p.data.modifiedAt
collections.forEach(c => {
const item = {
name: c.name,
- type: ResourceKind.COLLECTION,
- url: `/collections/${c.uuid}`,
+ kind: ResourceKind.COLLECTION,
+ url: getResourceUrl(c),
owner: c.ownerUuid,
uuid: c.uuid,
lastModified: c.modifiedAt
import { ProjectState } from '../../store/project/project-reducer';
import { RootState } from '../../store/store';
import { connect, DispatchProp } from 'react-redux';
-import { push } from 'react-router-redux';
import { DataColumns } from "../../components/data-table/data-table";
import DataExplorer, { DataExplorerContextActions } from "../../views-components/data-explorer/data-explorer";
import { projectExplorerItems } from "./data-explorer-selectors";
import { DataItem } from "../../views-components/data-explorer/data-item";
import { CollectionState } from "../../store/collection/collection-reducer";
-import { ResourceKind } from "../../models/resource";
-import projectActions from "../../store/project/project-action";
-import { getCollectionList } from "../../store/collection/collection-action";
+import { setProjectItem } from "../../store/navigation/navigation-action";
interface DataExplorerViewDataProps {
projects: ProjectState;
class DataExplorerView extends React.Component<DataExplorerViewProps, DataExplorerViewState> {
render() {
- const treeItemId = this.props.match.params.uuid;
- const items = projectExplorerItems(this.props.projects, treeItemId, this.props.collections);
+ console.log('VIEW!');
+ const items = projectExplorerItems(
+ this.props.projects.items,
+ this.props.projects.currentItemId,
+ this.props.collections
+ );
return (
<DataExplorer
items={items}
};
goToItem = (item: DataItem) => {
- // FIXME: Unify project tree switch action
- this.props.dispatch(push(item.url));
- if (item.type === ResourceKind.PROJECT || item.type === ResourceKind.LEVEL_UP) {
- this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(item.uuid));
- }
- this.props.dispatch<any>(getCollectionList(item.uuid));
+ this.props.dispatch<any>(setProjectItem(this.props.projects.items, item.uuid, item.kind));
}
}
import authActions from "../../store/auth/auth-action";
import { User } from "../../models/user";
import { RootState } from "../../store/store";
-import MainAppBar, { MainAppBarActionProps, MainAppBarMenuItem } from '../../views-components/main-app-bar/main-app-bar';
+import MainAppBar, {
+ MainAppBarActionProps,
+ MainAppBarMenuItem
+} from '../../views-components/main-app-bar/main-app-bar';
import { Breadcrumb } from '../../components/breadcrumbs/breadcrumbs';
import { push } from 'react-router-redux';
-import projectActions, { getProjectList } from "../../store/project/project-action";
import ProjectTree from '../../views-components/project-tree/project-tree';
-import { TreeItem, TreeItemStatus } from "../../components/tree/tree";
+import { TreeItem } from "../../components/tree/tree";
import { Project } from "../../models/project";
import { getTreePath } from '../../store/project/project-reducer';
import DataExplorer from '../data-explorer/data-explorer';
-import { getCollectionList } from "../../store/collection/collection-action";
+import { setProjectItem } from "../../store/navigation/navigation-action";
+import { ResourceKind } from "../../models/resource";
const drawerWidth = 240;
const appBarHeight = 102;
interface WorkbenchDataProps {
projects: Array<TreeItem<Project>>;
+ currentProjectId: string;
user?: User;
}
interface NavBreadcrumb extends Breadcrumb {
itemId: string;
- status: TreeItemStatus;
}
interface NavMenuItem extends MainAppBarMenuItem {
interface WorkbenchState {
anchorEl: any;
- breadcrumbs: NavBreadcrumb[];
searchText: string;
menuItems: {
accountMenu: NavMenuItem[],
};
mainAppBarActions: MainAppBarActionProps = {
- onBreadcrumbClick: ({ itemId, status }: NavBreadcrumb) => {
- this.toggleProjectTreeItem(itemId, status);
+ onBreadcrumbClick: ({ itemId }: NavBreadcrumb) => {
+ // this.toggleProjectTreeItem(itemId, status);
},
onSearch: searchText => {
this.setState({ searchText });
onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action()
};
- toggleProjectTreeItem = (itemId: string, status: TreeItemStatus) => {
- if (status === TreeItemStatus.Loaded) {
- this.openProjectItem(itemId);
- } else {
- this.props.dispatch<any>(getProjectList(itemId))
- .then(() => this.openProjectItem(itemId));
- }
- this.props.dispatch<any>(getCollectionList(itemId));
- }
-
- openProjectItem = (itemId: string) => {
- const branch = getTreePath(this.props.projects, itemId);
- this.setState({
- breadcrumbs: branch.map(item => ({
- label: item.data.name,
- itemId: item.data.uuid,
- status: item.status
- }))
- });
- this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(itemId));
- this.props.dispatch(push(`/project/${itemId}`));
- }
-
render() {
+ const branch = getTreePath(this.props.projects, this.props.currentProjectId);
+ const breadcrumbs = branch.map(item => ({
+ label: item.data.name,
+ itemId: item.data.uuid,
+ status: item.status
+ }));
+
const { classes, user } = this.props;
return (
<div className={classes.root}>
<div className={classes.appBar}>
<MainAppBar
- breadcrumbs={this.state.breadcrumbs}
+ breadcrumbs={breadcrumbs}
searchText={this.state.searchText}
user={this.props.user}
menuItems={this.state.menuItems}
{...this.mainAppBarActions}
/>
</div>
- {user &&
- <Drawer
- variant="permanent"
- classes={{
- paper: classes.drawerPaper,
- }}>
- <div className={classes.toolbar} />
- <ProjectTree
- projects={this.props.projects}
- toggleProjectTreeItem={this.toggleProjectTreeItem} />
- </Drawer>}
+ {user && <Drawer
+ variant="permanent"
+ classes={{
+ paper: classes.drawerPaper,
+ }}>
+ <div className={classes.toolbar} />
+ <ProjectTree
+ projects={this.props.projects}
+ toggleProjectTreeItem={itemId =>
+ this.props.dispatch<any>(
+ setProjectItem(this.props.projects, itemId, ResourceKind.PROJECT)
+ )}/>
+ </Drawer>}
<main className={classes.contentWrapper}>
<div className={classes.content}>
<Switch>
- <Route path="/project/:uuid" component={DataExplorer} />
+ <Route path="/projects/:uuid" component={DataExplorer} />
</Switch>
</div>
</main>
export default connect<WorkbenchDataProps>(
(state: RootState) => ({
- projects: state.projects,
+ projects: state.projects.items,
+ currentProjectId: state.projects.currentItemId,
user: state.auth.user
})
)(
"no-console": false,
"no-shadowed-variable": false,
"semicolon": true,
- "array-type": false
+ "array-type": false,
+ "interface-over-type-literal": false
},
"linterOptions": {
"exclude": [