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 { TerminalIcon } from 'components/icon/icon'
   9 import { IconButton, List, ListItem, Tooltip } from '@material-ui/core'
  10 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles'
  11 import { ArvadosTheme } from 'common/custom-theme'
  12 import { navigateTo } from 'store/navigation/navigation-action'
  13 import { RootState } from 'store/store'
  14 import { Dispatch } from 'redux'
  15 import {
  16     navigateToSharedWithMe,
  17     navigateToPublicFavorites,
  18     navigateToFavorites,
  19     navigateToGroups,
  20     navigateToAllProcesses,
  21     navigateToTrash,
  22 } from 'store/navigation/navigation-action'
  23 import { navigateToUserVirtualMachines } from 'store/navigation/navigation-action'
  24 import { RouterAction } from 'react-router-redux'
  25
  26 type CssRules = 'root' | 'unselected' | 'selected'
  27
  28 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  29     root: {
  30         width: '40px',
  31         height: '40px',
  32         // padding: '1rem'
  33         paddingLeft: '-1rem',
  34         marginLeft: '-0.3rem',
  35         marginBottom: '-1rem'
  36     },
  37     unselected: {
  38         color: theme.customs.colors.grey600,
  39     },
  40     selected: {
  41         color: theme.palette.primary.main,
  42     },
  43 })
  44
  45 enum SidePanelCollapsedCategory {
  46     PROJECTS = 'Home Projects',
  47     FAVORITES = 'My Favorites',
  48     PUBLIC_FAVORITES = 'Public Favorites',
  49     SHARED_WITH_ME = 'Shared with me',
  50     ALL_PROCESSES = 'All Processes',
  51     SHELL_ACCESS = 'Shell Access',
  52     GROUPS = 'Groups',
  53     TRASH = 'Trash',
  54 }
  55
  56 type TCollapsedCategory = {
  57     name: SidePanelCollapsedCategory
  58     icon: ReactElement
  59     navTarget: RouterAction | ''
  60 }
  61
  62 const sidePanelCollapsedCategories: TCollapsedCategory[] = [
  63     {
  64         name: SidePanelCollapsedCategory.PROJECTS,
  65         icon: <ProjectsIcon />,
  66         navTarget: '',
  67     },
  68     {
  69         name: SidePanelCollapsedCategory.FAVORITES,
  70         icon: <FavoriteIcon />,
  71         navTarget: navigateToFavorites,
  72     },
  73     {
  74         name: SidePanelCollapsedCategory.PUBLIC_FAVORITES,
  75         icon: <PublicFavoriteIcon />,
  76         navTarget: navigateToPublicFavorites,
  77     },
  78     {
  79         name: SidePanelCollapsedCategory.SHARED_WITH_ME,
  80         icon: <ShareMeIcon />,
  81         navTarget: navigateToSharedWithMe,
  82     },
  83     {
  84         name: SidePanelCollapsedCategory.ALL_PROCESSES,
  85         icon: <ProcessIcon />,
  86         navTarget: navigateToAllProcesses,
  87     },
  88     {
  89         name: SidePanelCollapsedCategory.SHELL_ACCESS,
  90         icon: <TerminalIcon />,
  91         navTarget: navigateToUserVirtualMachines,
  92     },
  93     {
  94         name: SidePanelCollapsedCategory.GROUPS,
  95         icon: <GroupsIcon style={{marginLeft: '2px', scale: '85%'}}/>,
  96         navTarget: navigateToGroups,
  97     },
  98     {
  99         name: SidePanelCollapsedCategory.TRASH,
 100         icon: <TrashIcon />,
 101         navTarget: navigateToTrash,
 102     },
 103 ]
 104
 105 const mapStateToProps = ({auth, properties }: RootState) => {
 106         return {
 107             user: auth.user,
 108             selectedPath: properties.breadcrumbs
 109                 ? properties.breadcrumbs[0].label !== 'Virtual Machines'
 110                 ? properties.breadcrumbs[0].label
 111                 : SidePanelCollapsedCategory.SHELL_ACCESS
 112                 : SidePanelCollapsedCategory.PROJECTS,
 113         }
 114 }
 115
 116 const mapDispatchToProps = (dispatch: Dispatch) => {
 117     return {
 118         navToHome: (navTarget) => dispatch<any>(navigateTo(navTarget)),
 119         navTo: (navTarget) => dispatch<any>(navTarget),
 120     }
 121 }
 122
 123 export const SidePanelCollapsed = withStyles(styles)(
 124     connect(mapStateToProps, mapDispatchToProps)(({ classes, user, selectedPath, navToHome, navTo }: WithStyles & any) => {
 125
 126         const handleClick = (cat: TCollapsedCategory) => {
 127             if (cat.name === SidePanelCollapsedCategory.PROJECTS) navToHome(user.uuid)
 128             else navTo(cat.navTarget)
 129         }
 130
 131         const { root, unselected, selected } = classes
 132         return (
 133             <List data-cy="side-panel-collapsed" className={root}>
 134                 {sidePanelCollapsedCategories.map((cat) => (
 135
 136                     <ListItem
 137                         key={cat.name}
 138                         data-cy={`collapsed-${cat.name.toLowerCase().replace(/\s+/g, '-')}`}
 139                         className={selectedPath === cat.name ? selected : unselected}
 140                         onClick={() => handleClick(cat)}
 141                         >
 142                         <Tooltip
 143                             title={cat.name}
 144                             disableFocusListener
 145                             >
 146                     <IconButton className={root}>
 147                             {cat.icon}
 148                             </IconButton>
 149                         </Tooltip>
 150                     </ListItem>
 151                 ))}
 152             </List>
 153         )
 154     })
 155 )