const history = createBrowserHistory();
const store = configureStore({
- projects: [
+ projects: {
+ items: [],
+ currentItemId: ""
+ },
+ collections: [
],
router: {
location: null
+// 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 {
+ PROJECT = "project",
+ COLLECTION = "collection",
+ PIPELINE = "pipeline",
+ LEVEL_UP = "levelup",
+ UNKNOWN = "unknown"
+}
+
+export function getResourceKind(itemKind: string) {
+ switch (itemKind) {
+ case "arvados#project": return ResourceKind.PROJECT;
+ case "arvados#collection": return ResourceKind.COLLECTION;
+ case "arvados#pipeline": return ResourceKind.PIPELINE;
+ default:
+ return ResourceKind.UNKNOWN;
+ }
}
return localStorage.getItem(API_TOKEN_KEY) || undefined;
}
+ public getUuid() {
+ return localStorage.getItem(USER_UUID_KEY) || undefined;
+ }
+
public getOwnerUuid() {
return localStorage.getItem(USER_OWNER_UUID_KEY) || undefined;
}
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];
CREATE_COLLECTION: collection => [...state, collection],
REMOVE_COLLECTION: () => state,
COLLECTIONS_REQUEST: () => {
- return state;
+ return [];
},
COLLECTIONS_SUCCESS: ({ collections }) => {
return collections;
--- /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";
+import sidePanelActions from "../side-panel/side-panel-action";
+
+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 enum ItemMode {
+ BOTH,
+ OPEN,
+ ACTIVE
+}
+
+export const setProjectItem = (projects: Array<TreeItem<Project>>, itemId: string, itemKind: ResourceKind, itemMode: ItemMode) => (dispatch: Dispatch) => {
+
+ const openProjectItem = (resource: Resource) => {
+ if (itemMode === ItemMode.OPEN || itemMode === ItemMode.BOTH) {
+ dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_OPEN(resource.uuid));
+ }
+
+ if (itemMode === ItemMode.ACTIVE || itemMode === ItemMode.BOTH) {
+ dispatch(sidePanelActions.RESET_SIDE_PANEL_ACTIVITY(resource.uuid));
+ }
+
+ dispatch(push(getResourceUrl({...resource, kind: itemKind})));
+ };
+
+ let treeItem = findTreeItem(projects, itemId);
+ if (treeItem && itemKind === ResourceKind.LEVEL_UP) {
+ treeItem = findTreeItem(projects, treeItem.data.ownerUuid);
+ }
+
+ if (treeItem) {
+ dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(treeItem.data.uuid));
+
+ if (treeItem.status === TreeItemStatus.Loaded) {
+ openProjectItem(treeItem.data);
+ } else {
+ dispatch<any>(getProjectList(itemId))
+ .then(() => openProjectItem(treeItem!.data));
+ }
+ if (itemMode === ItemMode.ACTIVE || itemMode === ItemMode.BOTH) {
+ dispatch<any>(getCollectionList(itemId));
+ }
+ }
+};
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];
});
it('should remove activity on projects list', () => {
- const initialState = [
- {
+ const initialState = {
+ items: [{
data: {
name: 'test',
href: 'href',
modifiedAt: '2018-01-01',
ownerUuid: 'owner-test123',
uuid: 'test123',
- kind: 'example'
+ kind: ResourceKind.PROJECT
},
id: "1",
open: true,
active: true,
status: 1
- }
- ];
- const project = [
- {
+ }],
+ currentItemId: "1"
+ };
+ const project = {
+ items: [{
data: {
name: 'test',
href: 'href',
modifiedAt: '2018-01-01',
ownerUuid: 'owner-test123',
uuid: 'test123',
- kind: 'example'
+ kind: ResourceKind.PROJECT
},
id: "1",
open: true,
active: false,
status: 1
- }
- ];
+ }],
+ currentItemId: "1"
+ };
const state = projectsReducer(initialState, actions.RESET_PROJECT_TREE_ACTIVITY(initialState[0].id));
expect(state).toEqual(project);
});
it('should toggle project tree item activity', () => {
- const initialState = [
- {
+ const initialState = {
+ items: [{
data: {
name: 'test',
href: 'href',
modifiedAt: '2018-01-01',
ownerUuid: 'owner-test123',
uuid: 'test123',
- kind: 'example'
+ kind: ResourceKind.PROJECT
},
id: "1",
open: true,
active: false,
status: 1
- }
- ];
- const project = [
- {
+ }],
+ currentItemId: "1"
+ };
+ const project = {
+ items: [{
data: {
name: 'test',
href: 'href',
modifiedAt: '2018-01-01',
ownerUuid: 'owner-test123',
uuid: 'test123',
- kind: 'example'
+ kind: ResourceKind.PROJECT
},
id: "1",
open: true,
active: true,
status: 1
- }
- ];
+ }],
+ currentItemId: "1"
+ };
const state = projectsReducer(initialState, actions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(initialState[0].id));
expect(state).toEqual(project);
it('should close project tree item ', () => {
- const initialState = [
- {
+ const initialState = {
+ items: [{
data: {
name: 'test',
href: 'href',
modifiedAt: '2018-01-01',
ownerUuid: 'owner-test123',
uuid: 'test123',
- kind: 'example'
+ kind: ResourceKind.PROJECT
},
id: "1",
open: true,
active: false,
status: 1,
toggled: false,
- }
- ];
- const project = [
- {
+ }],
+ currentItemId: "1"
+ };
+ const project = {
+ items: [{
data: {
name: 'test',
href: 'href',
modifiedAt: '2018-01-01',
ownerUuid: 'owner-test123',
uuid: 'test123',
- kind: 'example'
+ kind: ResourceKind.PROJECT
},
id: "1",
open: false,
active: false,
status: 1,
toggled: true
- }
- ];
+ }],
+ currentItemId: "1"
+ };
const state = projectsReducer(initialState, actions.TOGGLE_PROJECT_TREE_ITEM_OPEN(initialState[0].id));
expect(state).toEqual(project);
});
describe("findTreeBranch", () => {
-
const createTreeItem = (id: string, items?: Array<TreeItem<string>>): TreeItem<string> => ({
id,
items,
import actions, { ProjectAction } from "./project-action";
import { TreeItem, TreeItemStatus } from "../../components/tree/tree";
-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;
return item;
}
+export function getActiveTreeItem<T>(tree: Array<TreeItem<T>>): TreeItem<T> | undefined {
+ let item;
+ for (const t of tree) {
+ item = t.active
+ ? t
+ : getActiveTreeItem(t.items ? t.items : []);
+ if (item) {
+ break;
+ }
+ }
+ return item;
+}
+
export function getTreePath<T>(tree: Array<TreeItem<T>>, itemId: string): Array<TreeItem<T>> {
- for(const item of tree){
+ for (const item of tree){
if(item.id === itemId){
return [item];
} else {
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_OPEN: itemId => {
- const tree = _.cloneDeep(state);
- const item = findTreeItem(tree, itemId);
+ const items = _.cloneDeep(state.items);
+ const item = findTreeItem(items, itemId);
if (item) {
item.toggled = true;
item.open = !item.open;
}
- return tree;
+ return {
+ items,
+ currentItemId: itemId
+ };
},
TOGGLE_PROJECT_TREE_ITEM_ACTIVE: 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.active = true;
}
- return tree;
+ return {
+ items,
+ currentItemId: itemId
+ };
},
RESET_PROJECT_TREE_ACTIVITY: () => {
- const tree = _.cloneDeep(state);
- resetTreeActivity(tree);
- return tree;
+ const items = _.cloneDeep(state.items);
+ resetTreeActivity(items);
+ return {
+ items,
+ currentItemId: ""
+ };
},
default: () => state
});
import projectsReducer, { ProjectState } from "./project/project-reducer";
import sidePanelReducer, { SidePanelState } from './side-panel/side-panel-reducer';
import authReducer, { AuthState } from "./auth/auth-reducer";
-import collectionsReducer from "./collection/collection-reducer";
+import collectionsReducer, { CollectionState } from "./collection/collection-reducer";
const composeEnhancers =
(process.env.NODE_ENV === 'development' &&
export interface RootState {
auth: AuthState;
projects: ProjectState;
+ collections: CollectionState;
router: RouterState;
sidePanel: SidePanelState;
}
//
// SPDX-License-Identifier: AGPL-3.0
+import { getResourceKind, Resource, ResourceKind } from "../../models/resource";
+
export interface ProjectExplorerItem {
uuid: string;
name: string;
- type: string;
+ kind: ResourceKind;
+ url: string;
owner: string;
lastModified: string;
fileSize?: number;
status?: string;
}
+
+function resourceToDataItem(r: Resource, kind?: ResourceKind) {
+ return {
+ uuid: r.uuid,
+ name: r.name,
+ kind: kind ? kind : getResourceKind(r.kind),
+ owner: r.ownerUuid,
+ lastModified: r.modifiedAt
+ };
+}
+
import { DataColumn, toggleSortDirection, resetSortDirection } from '../../components/data-table/data-column';
import { DataTableFilterItem } from '../../components/data-table-filters/data-table-filters';
import { ContextMenuAction } from '../../components/context-menu/context-menu';
+import { ResourceKind } from "../../models/resource";
export interface ProjectExplorerContextActions {
onAddToFavourite: (item: ProjectExplorerItem) => void;
interface ProjectExplorerProps {
items: ProjectExplorerItem[];
+ onRowClick: (item: ProjectExplorerItem) => void;
}
interface ProjectExplorerState {
name: "Group",
selected: true
}],
- render: item => renderType(item.type)
+ render: item => renderType(item.kind)
}, {
name: "Owner",
selected: true,
rowsPerPage={this.state.rowsPerPage}
onColumnToggle={this.toggleColumn}
onFiltersChange={this.changeFilters}
- onRowClick={console.log}
+ onRowClick={this.props.onRowClick}
onSortToggle={this.toggleSort}
onSearch={this.search}
onContextAction={this.executeAction}
</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" />;
+ switch (item.kind) {
+ case ResourceKind.LEVEL_UP:
+ return <i className="icon-level-up" style={{fontSize: "1rem"}}/>;
+ case ResourceKind.PROJECT:
+ return <i className="fas fa-folder fa-lg"/>;
+ case ResourceKind.COLLECTION:
+ return <i className="fas fa-th fa-lg"/>;
default:
return <i />;
}
import { TreeItem } from "../../components/tree/tree";
import { Project } from "../../models/project";
+import { findTreeItem } from "../../store/project/project-reducer";
+import { ResourceKind } from "../../models/resource";
+import { Collection } from "../../models/collection";
+import { getResourceUrl } from "../../store/navigation/navigation-action";
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
-});
+export const projectExplorerItems = (projects: Array<TreeItem<Project>>, treeItemId: string, collections: Array<Collection>): ProjectExplorerItem[] => {
+ const dataItems: ProjectExplorerItem[] = [];
+
+ const treeItem = findTreeItem(projects, treeItemId);
+ if (treeItem) {
+ dataItems.push({
+ name: "..",
+ url: getResourceUrl(treeItem.data),
+ kind: ResourceKind.LEVEL_UP,
+ owner: treeItem.data.ownerUuid,
+ uuid: treeItem.data.uuid,
+ lastModified: treeItem.data.modifiedAt
+ });
+
+ if (treeItem.items) {
+ treeItem.items.forEach(p => {
+ const item = {
+ name: p.data.name,
+ kind: ResourceKind.PROJECT,
+ url: getResourceUrl(treeItem.data),
+ owner: p.data.ownerUuid,
+ uuid: p.data.uuid,
+ lastModified: p.data.modifiedAt
+ } as ProjectExplorerItem;
+
+ dataItems.push(item);
+ });
+ }
+ }
+
+ collections.forEach(c => {
+ const item = {
+ name: c.name,
+ kind: ResourceKind.COLLECTION,
+ url: getResourceUrl(c),
+ owner: c.ownerUuid,
+ uuid: c.uuid,
+ lastModified: c.modifiedAt
+ } as ProjectExplorerItem;
+
+ dataItems.push(item);
+ });
+
+ return dataItems;
+};
+
// 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 { RouteComponentProps } from 'react-router';
+import { ProjectState } from '../../store/project/project-reducer';
import { RootState } from '../../store/store';
-import { mapProjectTreeItem } from './project-panel-selectors';
+import { connect, DispatchProp } from 'react-redux';
+import { CollectionState } from "../../store/collection/collection-reducer";
+import { ItemMode, setProjectItem } from "../../store/navigation/navigation-action";
+import ProjectExplorer from "../../views-components/project-explorer/project-explorer";
+import { projectExplorerItems } from "./project-panel-selectors";
+import { ProjectExplorerItem } from "../../views-components/project-explorer/project-explorer-item";
interface ProjectPanelDataProps {
projects: ProjectState;
+ collections: CollectionState;
}
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 || [];
+ const items = projectExplorerItems(
+ this.props.projects.items,
+ this.props.projects.currentItemId,
+ this.props.collections
+ );
return (
- <ProjectExplorer items={projectItems.map(mapProjectTreeItem)} />
+ <ProjectExplorer
+ items={items}
+ onRowClick={this.goToItem}
+ />
);
}
+
+ goToItem = (item: ProjectExplorerItem) => {
+ this.props.dispatch<any>(setProjectItem(this.props.projects.items, item.uuid, item.kind, ItemMode.BOTH));
+ }
}
export default connect(
(state: RootState) => ({
- projects: state.projects
+ projects: state.projects,
+ collections: state.collections
})
)(ProjectPanel);
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 ProjectPanel from '../project-panel/project-panel';
import sidePanelActions from '../../store/side-panel/side-panel-action';
-import { projectService } from '../../services/services';
import SidePanel, { SidePanelItem } from '../../components/side-panel/side-panel';
+import { ResourceKind } from "../../models/resource";
+import { ItemMode, setProjectItem } from "../../store/navigation/navigation-action";
+import projectActions from "../../store/project/project-action";
const drawerWidth = 240;
const appBarHeight = 102;
interface WorkbenchDataProps {
projects: Array<TreeItem<Project>>;
+ currentProjectId: string;
user?: User;
sidePanelItems: SidePanelItem[];
}
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.toggleProjectTreeItemOpen(itemId, status);
+ onBreadcrumbClick: ({ itemId }: NavBreadcrumb) => {
+ this.props.dispatch<any>(
+ setProjectItem(this.props.projects, itemId, ResourceKind.PROJECT, ItemMode.BOTH)
+ );
},
onSearch: searchText => {
this.setState({ searchText });
onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action()
};
- toggleProjectTreeItemOpen = (itemId: string, status: TreeItemStatus) => {
- if (status === TreeItemStatus.Loaded) {
- this.openProjectItem(itemId);
- this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_OPEN(itemId));
- this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(itemId));
- } else {
- this.props.dispatch<any>(getProjectList(itemId))
- .then(() => {
- this.openProjectItem(itemId);
- this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_OPEN(itemId));
- this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(itemId));
- });
- }
- }
-
- toggleProjectTreeItemActive = (itemId: string, status: TreeItemStatus) => {
- if (status === TreeItemStatus.Loaded) {
- this.openProjectItem(itemId);
- this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(itemId));
- this.props.dispatch(sidePanelActions.RESET_SIDE_PANEL_ACTIVITY(itemId));
- } else {
- this.props.dispatch<any>(getProjectList(itemId))
- .then(() => {
- this.openProjectItem(itemId);
- this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(itemId));
- this.props.dispatch(sidePanelActions.RESET_SIDE_PANEL_ACTIVITY(itemId));
- });
- }
- }
-
toggleSidePanelOpen = (itemId: string) => {
this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_OPEN(itemId));
}
this.props.dispatch(projectActions.RESET_PROJECT_TREE_ACTIVITY(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_ACTIVE(itemId));
- this.props.dispatch(push(`/project/${itemId}`));
- }
-
render() {
- const { classes, user, projects, sidePanelItems } = this.props;
+ 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}
<SidePanel
toggleOpen={this.toggleSidePanelOpen}
toggleActive={this.toggleSidePanelActive}
- sidePanelItems={sidePanelItems}>
+ sidePanelItems={this.props.sidePanelItems}>
<ProjectTree
- projects={projects}
- toggleOpen={this.toggleProjectTreeItemOpen}
- toggleActive={this.toggleProjectTreeItemActive} />
+ projects={this.props.projects}
+ toggleOpen={itemId =>
+ this.props.dispatch<any>(
+ setProjectItem(this.props.projects, itemId, ResourceKind.PROJECT, ItemMode.OPEN)
+ )}
+ toggleActive={itemId =>
+ this.props.dispatch<any>(
+ setProjectItem(this.props.projects, itemId, ResourceKind.PROJECT, ItemMode.ACTIVE)
+ )}
+ />
</SidePanel>
</Drawer>}
<main className={classes.contentWrapper}>
<div className={classes.content}>
<Switch>
- <Route path="/project/:name" component={ProjectPanel} />
+ <Route path="/projects/:name" component={ProjectPanel} />
</Switch>
</div>
</main>
export default connect<WorkbenchDataProps>(
(state: RootState) => ({
- projects: state.projects,
+ projects: state.projects.items,
+ currentProjectId: state.projects.currentItemId,
user: state.auth.user,
- sidePanelItems: state.sidePanel,
+ sidePanelItems: state.sidePanel
})
)(
withStyles(styles)(Workbench)
"no-debugger": false,
"no-console": false,
"no-shadowed-variable": false,
- "semicolon": true
+ "semicolon": true,
+ "array-type": false,
+ "interface-over-type-literal": false
},
"linterOptions": {
"exclude": [
projects / arvados-workbench2.git / commitdiff