PROJECT = "project",
COLLECTION = "collection",
PIPELINE = "pipeline",
- LEVEL_UP = "",
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;
+ case "arvados#project":
+ case "arvados#group":
+ return ResourceKind.PROJECT;
+ case "arvados#collection":
+ return ResourceKind.COLLECTION;
+ case "arvados#pipeline":
+ return ResourceKind.PIPELINE;
default:
return ResourceKind.UNKNOWN;
}
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 "#";
+ default: return "";
}
};
ACTIVE
}
-export const setProjectItem = (itemId: string, itemKind = ResourceKind.PROJECT, itemMode = ItemMode.OPEN) =>
+export const setProjectItem = (itemId: string, itemMode: ItemMode) =>
(dispatch: Dispatch, getState: () => RootState) => {
- const { projects } = getState();
-
- let treeItem = findTreeItem(projects.items, itemId);
- if (treeItem && itemKind === ResourceKind.LEVEL_UP) {
- treeItem = findTreeItem(projects.items, treeItem.data.ownerUuid);
- }
+ const { projects, router } = getState();
+ const treeItem = findTreeItem(projects.items, itemId);
if (treeItem) {
- dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(treeItem.data.uuid));
- if (treeItem.status === TreeItemStatus.Loaded) {
- dispatch<any>(openProjectItem(treeItem.data, itemKind, itemMode));
- } else {
- dispatch<any>(getProjectList(itemId))
- .then(() => dispatch<any>(openProjectItem(treeItem!.data, itemKind, itemMode)));
+ dispatch(sidePanelActions.RESET_SIDE_PANEL_ACTIVITY());
+
+ if (itemMode === ItemMode.OPEN || itemMode === ItemMode.BOTH) {
+ dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_OPEN(treeItem.data.uuid));
}
+
+ const resourceUrl = getResourceUrl({ ...treeItem.data });
+
if (itemMode === ItemMode.ACTIVE || itemMode === ItemMode.BOTH) {
- dispatch<any>(getCollectionList(itemId));
+ if (router.location && !router.location.pathname.includes(resourceUrl)) {
+ dispatch(push(resourceUrl));
+ }
+ dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(treeItem.data.uuid));
}
- }
- };
-const openProjectItem = (resource: Resource, itemKind: ResourceKind, itemMode: ItemMode) =>
- (dispatch: Dispatch, getState: () => RootState) => {
+ const promise = treeItem.status === TreeItemStatus.Loaded
+ ? Promise.resolve()
+ : dispatch<any>(getProjectList(itemId));
- const { collections, projects } = getState();
+ promise
+ .then(() => dispatch<any>(getCollectionList(itemId)))
+ .then(() => dispatch<any>(() => {
+ const { projects, collections } = getState();
+ dispatch(dataExplorerActions.SET_ITEMS({
+ id: PROJECT_PANEL_ID,
+ items: projectPanelItems(
+ projects.items,
+ treeItem.data.uuid,
+ collections
+ )
+ }));
+ }));
- 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 })));
- dispatch(dataExplorerActions.SET_ITEMS({
- id: PROJECT_PANEL_ID,
- items: projectPanelItems(
- projects.items,
- resource.uuid,
- collections
- )
- }));
};
PROJECTS_SUCCESS: ofType<{ projects: Project[], parentItemId?: string }>(),
TOGGLE_PROJECT_TREE_ITEM_OPEN: ofType<string>(),
TOGGLE_PROJECT_TREE_ITEM_ACTIVE: ofType<string>(),
- RESET_PROJECT_TREE_ACTIVITY: ofType<string>(),
+ RESET_PROJECT_TREE_ACTIVITY: ofType<string>()
}, {
tag: 'type',
value: 'payload'
resetTreeActivity(items);
const item = findTreeItem(items, itemId);
if (item) {
+ item.toggled = true;
item.active = true;
}
return {
const actions = unionize({
TOGGLE_SIDE_PANEL_ITEM_OPEN: ofType<string>(),
TOGGLE_SIDE_PANEL_ITEM_ACTIVE: ofType<string>(),
- RESET_SIDE_PANEL_ACTIVITY: ofType<string>(),
+ RESET_SIDE_PANEL_ACTIVITY: ofType<{}>(),
}, {
tag: 'type',
value: 'payload'
const treeItem = findTreeItem(projects, treeItemId);
if (treeItem) {
- dataItems.push({
- name: "..",
- url: getResourceUrl(treeItem.data),
- kind: ResourceKind.LEVEL_UP,
- owner: "",
- uuid: treeItem.data.uuid,
- lastModified: ""
- });
-
if (treeItem.items) {
treeItem.items.forEach(p => {
const item = {
import { ContextMenuAction } from '../../components/context-menu/context-menu';
import { DispatchProp, connect } from 'react-redux';
import actions from "../../store/data-explorer/data-explorer-action";
-import { setProjectItem } from "../../store/navigation/navigation-action";
+import { setProjectItem, ItemMode } from "../../store/navigation/navigation-action";
import { DataColumns } from '../../components/data-table/data-table';
import { ResourceKind } from "../../models/resource";
+import { RouteComponentProps } from 'react-router';
export const PROJECT_PANEL_ID = "projectPanel";
-class ProjectPanel extends React.Component<DispatchProp & WithStyles<CssRules>> {
+
+type ProjectPanelProps = { onItemOpen: (itemId: string) => void }
+ & DispatchProp
+ & WithStyles<CssRules>
+ & RouteComponentProps<{ id: string }>;
+class ProjectPanel extends React.Component<ProjectPanelProps> {
render() {
return <div>
<div className={this.props.classes.toolbar}>
this.props.dispatch(actions.SET_COLUMNS({ id: PROJECT_PANEL_ID, columns }));
}
+ componentWillReceiveProps(nextProps: ProjectPanelProps) {
+ if (this.props.match.params.id !== nextProps.match.params.id) {
+ this.props.onItemOpen(nextProps.match.params.id);
+ }
+ }
+
toggleColumn = (toggledColumn: DataColumn<ProjectPanelItem>) => {
this.props.dispatch(actions.TOGGLE_COLUMN({ id: PROJECT_PANEL_ID, columnName: toggledColumn.name }));
}
}
openProject = (item: ProjectPanelItem) => {
- this.props.dispatch<any>(setProjectItem(item.uuid));
+ this.props.onItemOpen(item.uuid);
}
}
const renderIcon = (item: ProjectPanelItem) => {
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:
import { StyleRulesCallback, Theme, WithStyles, withStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import { connect, DispatchProp } from "react-redux";
-import { Route, Switch } from "react-router";
+import { Route, Switch, RouteComponentProps } from "react-router";
import authActions from "../../store/auth/auth-action";
import dataExplorerActions from "../../store/data-explorer/data-explorer-action";
import { User } from "../../models/user";
mainAppBarActions: MainAppBarActionProps = {
onBreadcrumbClick: ({ itemId }: NavBreadcrumb) => {
- this.props.dispatch<any>(setProjectItem(itemId, ResourceKind.PROJECT, ItemMode.BOTH));
+ this.props.dispatch<any>(setProjectItem(itemId, ItemMode.BOTH));
},
onSearch: searchText => {
this.setState({ searchText });
}
render() {
- const branch = getTreePath(this.props.projects, this.props.currentProjectId);
- const breadcrumbs = branch.map(item => ({
+ const path = getTreePath(this.props.projects, this.props.currentProjectId);
+ const breadcrumbs = path.map(item => ({
label: item.data.name,
itemId: item.data.uuid,
status: item.status
- }));
+ }));
const { classes, user } = this.props;
return (
projects={this.props.projects}
toggleOpen={itemId =>
this.props.dispatch<any>(
- setProjectItem(itemId, ResourceKind.PROJECT, ItemMode.OPEN)
+ setProjectItem(itemId, ItemMode.OPEN)
)}
toggleActive={itemId =>
this.props.dispatch<any>(
- setProjectItem(itemId, ResourceKind.PROJECT, ItemMode.ACTIVE)
+ setProjectItem(itemId, ItemMode.ACTIVE)
)}
/>
</SidePanel>
<main className={classes.contentWrapper}>
<div className={classes.content}>
<Switch>
- <Route path="/projects/:name" component={ProjectPanel} />
+ <Route path="/projects/:id" render={this.renderProjectPanel} />
</Switch>
</div>
</main>
</div>
);
}
+
+ renderProjectPanel = (props: RouteComponentProps<any>) =>
+ <ProjectPanel
+ onItemOpen={itemId => this.props.dispatch<any>(
+ setProjectItem(itemId, ItemMode.ACTIVE)
+ )}
+ {...props} />
}
export default connect<WorkbenchDataProps>(