1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import React, { ReactElement } from 'react'
6 import { connect } from 'react-redux'
7 import { ProjectsIcon, ProcessIcon, FavoriteIcon, ShareMeIcon, TrashIcon, PublicFavoriteIcon, GroupsIcon } from 'components/icon/icon'
8 import { List, ListItem, Tooltip } from '@material-ui/core'
9 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles'
10 import { ArvadosTheme } from 'common/custom-theme'
11 import { navigateTo } from 'store/navigation/navigation-action'
12 import { RootState } from 'store/store'
13 import { Dispatch } from 'redux'
15 navigateToSharedWithMe,
16 navigateToPublicFavorites,
19 navigateToAllProcesses,
21 } from 'store/navigation/navigation-action'
22 import { RouterAction } from 'react-router-redux'
24 type CssRules = 'root' | 'unselected' | 'selected'
26 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
29 color: theme.customs.colors.grey700,
32 color: theme.palette.primary.main,
36 enum SidePanelCollapsedCategory {
37 PROJECTS = 'Home Projects',
38 SHARED_WITH_ME = 'Shared with me',
39 PUBLIC_FAVORITES = 'Public Favorites',
40 FAVORITES = 'My Favorites',
42 ALL_PROCESSES = 'All Processes',
46 type TCollapsedCategory = {
47 name: SidePanelCollapsedCategory
49 navTarget: RouterAction | ''
52 const sidePanelCollapsedCategories: TCollapsedCategory[] = [
54 name: SidePanelCollapsedCategory.PROJECTS,
55 icon: <ProjectsIcon />,
59 name: SidePanelCollapsedCategory.SHARED_WITH_ME,
60 icon: <ShareMeIcon />,
61 navTarget: navigateToSharedWithMe,
64 name: SidePanelCollapsedCategory.PUBLIC_FAVORITES,
65 icon: <PublicFavoriteIcon />,
66 navTarget: navigateToPublicFavorites,
69 name: SidePanelCollapsedCategory.FAVORITES,
70 icon: <FavoriteIcon />,
71 navTarget: navigateToFavorites,
74 name: SidePanelCollapsedCategory.GROUPS,
76 navTarget: navigateToGroups,
79 name: SidePanelCollapsedCategory.ALL_PROCESSES,
80 icon: <ProcessIcon />,
81 navTarget: navigateToAllProcesses,
84 name: SidePanelCollapsedCategory.TRASH,
86 navTarget: navigateToTrash,
90 const mapStateToProps = ({auth, properties }: RootState) => {
93 selectedPath: properties.breadcrumbs ? properties.breadcrumbs[0].label : SidePanelCollapsedCategory.PROJECTS,
97 const mapDispatchToProps = (dispatch: Dispatch) => {
99 navToHome: (navTarget) => dispatch<any>(navigateTo(navTarget)),
100 navTo: (navTarget) => dispatch<any>(navTarget),
104 export const SidePanelCollapsed = withStyles(styles)(
105 connect(mapStateToProps, mapDispatchToProps)(({ classes, user, selectedPath, navToHome, navTo }: WithStyles & any) => {
107 const handleClick = (cat: TCollapsedCategory) => {
108 if (cat.name === SidePanelCollapsedCategory.PROJECTS) navToHome(user.uuid)
109 else navTo(cat.navTarget)
112 const { root, unselected, selected } = classes
114 <List className={root}>
115 {sidePanelCollapsedCategories.map((cat) => (
118 className={selectedPath === cat.name ? selected : unselected}
119 onClick={() => handleClick(cat)}