+ };
+
+ render() {
+ 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 (
+ <div className={classes.root}>
+ <div className={classes.appBar}>
+ <MainAppBar
+ 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} />
+ <SidePanel
+ toggleOpen={this.toggleSidePanelOpen}
+ toggleActive={this.toggleSidePanelActive}
+ sidePanelItems={this.props.sidePanelItems}
+ onContextMenu={(event) => this.openContextMenu(event, {
+ uuid: authService.getUuid() || "",
+ name: "",
+ kind: ContextMenuKind.ROOT_PROJECT
+ })}>
+ <ProjectTree
+ projects={this.props.projects}
+ toggleOpen={itemId => this.props.dispatch<any>(setProjectItem(itemId, ItemMode.OPEN))}
+ onContextMenu={(event, item) => this.openContextMenu(event, {
+ uuid: item.data.uuid,
+ name: item.data.name,
+ kind: ContextMenuKind.PROJECT
+ })}
+ toggleActive={itemId => {
+ this.props.dispatch<any>(setProjectItem(itemId, ItemMode.ACTIVE));
+ this.props.dispatch<any>(loadDetails(itemId, ResourceKind.PROJECT));
+ this.props.dispatch<any>(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(SidePanelIdentifiers.PROJECTS));
+ }} />
+ </SidePanel>
+ </Drawer>}
+ <main className={classes.contentWrapper}>
+ <div className={classes.content}>
+ <Switch>
+ <Route path="/projects/:id" render={this.renderProjectPanel} />
+ <Route path="/favorites" render={this.renderFavoritePanel} />
+ </Switch>
+ </div>
+ {user && <DetailsPanel />}
+ </main>
+ <ContextMenu />
+ <Snackbar />
+ <CreateProjectDialog />
+ <CurrentTokenDialog
+ currentToken={this.props.currentToken}
+ open={this.state.isCurrentTokenDialogOpen}
+ handleClose={this.toggleCurrentTokenModal} />
+ </div>
+ );
+ }
+
+ renderProjectPanel = (props: RouteComponentProps<{ id: string }>) => <ProjectPanel
+ onItemRouteChange={itemId => this.props.dispatch<any>(setProjectItem(itemId, ItemMode.ACTIVE))}
+ onContextMenu={(event, item) => {
+ const kind = item.kind === ResourceKind.PROJECT ? ContextMenuKind.PROJECT : ContextMenuKind.RESOURCE;
+ this.openContextMenu(event, {
+ uuid: item.uuid,
+ name: item.name,
+ kind
+ });
+ }}
+ onDialogOpen={this.handleCreationDialogOpen}
+ onItemClick={item => {
+ this.props.dispatch<any>(loadDetails(item.uuid, item.kind as ResourceKind));
+ }}
+ onItemDoubleClick={item => {
+ this.props.dispatch<any>(setProjectItem(item.uuid, ItemMode.ACTIVE));
+ this.props.dispatch<any>(loadDetails(item.uuid, ResourceKind.PROJECT));
+ }}
+ {...props} />
+
+ renderFavoritePanel = (props: RouteComponentProps<{ id: string }>) => <FavoritePanel
+ onItemRouteChange={() => this.props.dispatch<any>(dataExplorerActions.REQUEST_ITEMS({ id: FAVORITE_PANEL_ID }))}
+ onContextMenu={(event, item) => {
+ const kind = item.kind === ResourceKind.PROJECT ? ContextMenuKind.PROJECT : ContextMenuKind.RESOURCE;
+ this.openContextMenu(event, {
+ uuid: item.uuid,
+ name: item.name,
+ kind,
+ });
+ }}
+ onDialogOpen={this.handleCreationDialogOpen}
+ onItemClick={item => {
+ this.props.dispatch<any>(loadDetails(item.uuid, item.kind as ResourceKind));
+ }}
+ onItemDoubleClick={item => {
+ this.props.dispatch<any>(loadDetails(item.uuid, ResourceKind.PROJECT));
+ this.props.dispatch<any>(setProjectItem(item.uuid, ItemMode.ACTIVE));
+ this.props.dispatch<any>(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(SidePanelIdentifiers.PROJECTS));
+ }}
+ {...props} />
+
+ mainAppBarActions: MainAppBarActionProps = {
+ onBreadcrumbClick: ({ itemId }: NavBreadcrumb) => {
+ this.props.dispatch<any>(setProjectItem(itemId, ItemMode.BOTH));
+ this.props.dispatch<any>(loadDetails(itemId, ResourceKind.PROJECT));
+ },
+ onSearch: searchText => {
+ this.setState({ searchText });
+ this.props.dispatch(push(`/search?q=${searchText}`));
+ },
+ onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action(),
+ onDetailsPanelToggle: () => {
+ this.props.dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL());
+ },
+ onContextMenu: (event: React.MouseEvent<HTMLElement>, breadcrumb: NavBreadcrumb) => {
+ this.openContextMenu(event, {
+ uuid: breadcrumb.itemId,
+ name: breadcrumb.label,
+ kind: ContextMenuKind.PROJECT
+ });