src/views-components/side-panel/side-panel-collapsed.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   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'
  14 import {
  15     navigateToSharedWithMe,
  16     navigateToPublicFavorites,
  17     navigateToFavorites,
  18     navigateToGroups,
  19     navigateToAllProcesses,
  20     navigateToTrash,
  21 } from 'store/navigation/navigation-action'
  22 import { RouterAction } from 'react-router-redux'
  23
  24 type CssRules = 'root' | 'unselected' | 'selected'
  25
  26 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  27     root: {},
  28     unselected: {
  29         color: theme.customs.colors.grey700,
  30     },
  31     selected: {
  32         color: theme.palette.primary.main,
  33     },
  34 })
  35
  36 enum SidePanelCollapsedCategory {
  37     PROJECTS = 'Home Projects',
  38     SHARED_WITH_ME = 'Shared with me',
  39     PUBLIC_FAVORITES = 'Public Favorites',
  40     FAVORITES = 'My Favorites',
  41     GROUPS = 'Groups',
  42     ALL_PROCESSES = 'All Processes',
  43     TRASH = 'Trash',
  44 }
  45
  46 type TCollapsedCategory = {
  47     name: SidePanelCollapsedCategory
  48     icon: ReactElement
  49     navTarget: RouterAction | ''
  50 }
  51
  52 const sidePanelCollapsedCategories: TCollapsedCategory[] = [
  53     {
  54         name: SidePanelCollapsedCategory.PROJECTS,
  55         icon: <ProjectsIcon />,
  56         navTarget: '',
  57     },
  58     {
  59         name: SidePanelCollapsedCategory.SHARED_WITH_ME,
  60         icon: <ShareMeIcon />,
  61         navTarget: navigateToSharedWithMe,
  62     },
  63     {
  64         name: SidePanelCollapsedCategory.PUBLIC_FAVORITES,
  65         icon: <PublicFavoriteIcon />,
  66         navTarget: navigateToPublicFavorites,
  67     },
  68     {
  69         name: SidePanelCollapsedCategory.FAVORITES,
  70         icon: <FavoriteIcon />,
  71         navTarget: navigateToFavorites,
  72     },
  73     {
  74         name: SidePanelCollapsedCategory.GROUPS,
  75         icon: <GroupsIcon />,
  76         navTarget: navigateToGroups,
  77     },
  78     {
  79         name: SidePanelCollapsedCategory.ALL_PROCESSES,
  80         icon: <ProcessIcon />,
  81         navTarget: navigateToAllProcesses,
  82     },
  83     {
  84         name: SidePanelCollapsedCategory.TRASH,
  85         icon: <TrashIcon />,
  86         navTarget: navigateToTrash,
  87     },
  88 ]
  89
  90 const mapStateToProps = ({auth, properties }: RootState) => {
  91     return {
  92         user: auth.user,
  93         selectedPath: properties.breadcrumbs ? properties.breadcrumbs[0].label : SidePanelCollapsedCategory.PROJECTS,
  94     }
  95 }
  96
  97 const mapDispatchToProps = (dispatch: Dispatch) => {
  98     return {
  99         navToHome: (navTarget) => dispatch<any>(navigateTo(navTarget)),
 100         navTo: (navTarget) => dispatch<any>(navTarget),
 101     }
 102 }
 103
 104 export const SidePanelCollapsed = withStyles(styles)(
 105     connect(mapStateToProps, mapDispatchToProps)(({ classes, user, selectedPath, navToHome, navTo }: WithStyles & any) => {
 106
 107         const handleClick = (cat: TCollapsedCategory) => {
 108             if (cat.name === SidePanelCollapsedCategory.PROJECTS) navToHome(user.uuid)
 109             else navTo(cat.navTarget)
 110         }
 111
 112         const { root, unselected, selected } = classes
 113         return (
 114             <List data-cy="side-panel-collapsed" className={root}>
 115                 {sidePanelCollapsedCategories.map((cat) => (
 116                     <ListItem
 117                         key={cat.name}
 118                         data-cy={`collapsed-${cat.name.toLowerCase().replace(/\s+/g, '-')}`}
 119                         className={selectedPath === cat.name ? selected : unselected}
 120                         onClick={() => handleClick(cat)}
 121                     >
 122                         <Tooltip
 123                             title={cat.name}
 124                             disableFocusListener
 125                         >
 126                             {cat.icon}
 127                         </Tooltip>
 128                     </ListItem>
 129                 ))}
 130             </List>
 131         )
 132     })
 133 )