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