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