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 import { User } from 'models/user'
  26
  27 type CssRules = 'button' | 'unselected' | 'selected'
  28
  29 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  30     button: {
  31         width: '40px',
  32         height: '40px',
  33         paddingLeft: '-2rem',
  34         marginLeft: '-0.6rem',
  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 type SidePanelCollapsedProps = {
 106     user: User;
 107     selectedPath: string;
 108     navToHome: (uuid: string) => void;
 109     navTo: (navTarget: RouterAction | '') => void;
 110 };
 111
 112 const mapStateToProps = ({auth, properties }: RootState) => {
 113         return {
 114             user: auth.user,
 115             selectedPath: properties.breadcrumbs
 116                 ? properties.breadcrumbs[0].label !== 'Virtual Machines'
 117                 ? properties.breadcrumbs[0].label
 118                 : SidePanelCollapsedCategory.SHELL_ACCESS
 119                 : SidePanelCollapsedCategory.PROJECTS,
 120         }
 121 }
 122
 123 const mapDispatchToProps = (dispatch: Dispatch) => {
 124     return {
 125         navToHome: (navTarget) => dispatch<any>(navigateTo(navTarget)),
 126         navTo: (navTarget) => dispatch<any>(navTarget),
 127     }
 128 }
 129
 130 export const SidePanelCollapsed = withStyles(styles)(
 131     connect(mapStateToProps, mapDispatchToProps)(({ classes, user, selectedPath, navToHome, navTo }: WithStyles & SidePanelCollapsedProps) => {
 132
 133         const handleClick = (cat: TCollapsedCategory) => {
 134             if (cat.name === SidePanelCollapsedCategory.PROJECTS) navToHome(user.uuid)
 135             else navTo(cat.navTarget)
 136         }
 137
 138         const { button, unselected, selected } = classes
 139         return (
 140             <List data-cy='side-panel-collapsed'>
 141                 {sidePanelCollapsedCategories.map((cat) => (
 142                     <ListItem
 143                         key={cat.name}
 144                         data-cy={`collapsed-${cat.name.toLowerCase().replace(/\s+/g, '-')}`}
 145                         onClick={() => handleClick(cat)}
 146                         >
 147                         <Tooltip
 148                             className={selectedPath === cat.name ? selected : unselected}
 149                             title={cat.name}
 150                             disableFocusListener
 151                             >
 152                             <IconButton className={button}>{cat.icon}</IconButton>
 153                         </Tooltip>
 154                     </ListItem>
 155                 ))}
 156             </List>
 157         );
 158     })
 159 )