import React, { ReactElement } from 'react'
import { connect } from 'react-redux'
import { ProjectsIcon, ProcessIcon, FavoriteIcon, ShareMeIcon, TrashIcon, PublicFavoriteIcon, GroupsIcon } from 'components/icon/icon'
-import { List, ListItem, Tooltip } from '@material-ui/core'
+import { TerminalIcon } from 'components/icon/icon'
+import { IconButton, List, ListItem, Tooltip } from '@material-ui/core'
import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles'
import { ArvadosTheme } from 'common/custom-theme'
import { navigateTo } from 'store/navigation/navigation-action'
navigateToAllProcesses,
navigateToTrash,
} from 'store/navigation/navigation-action'
+import { navigateToUserVirtualMachines } from 'store/navigation/navigation-action'
import { RouterAction } from 'react-router-redux'
-type CssRules = 'root' | 'unselected' | 'selected'
+type CssRules = 'button' | 'unselected' | 'selected'
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
- root: {},
+ button: {
+ width: '40px',
+ height: '40px',
+ paddingLeft: '-2rem',
+ marginLeft: '-0.6rem',
+ marginBottom: '-1rem'
+ },
unselected: {
- color: theme.customs.colors.grey700,
+ color: theme.customs.colors.grey600,
},
selected: {
color: theme.palette.primary.main,
PUBLIC_FAVORITES = 'Public Favorites',
SHARED_WITH_ME = 'Shared with me',
ALL_PROCESSES = 'All Processes',
+ SHELL_ACCESS = 'Shell Access',
GROUPS = 'Groups',
TRASH = 'Trash',
}
icon: <ProcessIcon />,
navTarget: navigateToAllProcesses,
},
+ {
+ name: SidePanelCollapsedCategory.SHELL_ACCESS,
+ icon: <TerminalIcon />,
+ navTarget: navigateToUserVirtualMachines,
+ },
{
name: SidePanelCollapsedCategory.GROUPS,
- icon: <GroupsIcon />,
+ icon: <GroupsIcon style={{marginLeft: '2px', scale: '85%'}}/>,
navTarget: navigateToGroups,
},
{
]
const mapStateToProps = ({auth, properties }: RootState) => {
- return {
- user: auth.user,
- selectedPath: properties.breadcrumbs ? properties.breadcrumbs[0].label : SidePanelCollapsedCategory.PROJECTS,
- }
+ return {
+ user: auth.user,
+ selectedPath: properties.breadcrumbs
+ ? properties.breadcrumbs[0].label !== 'Virtual Machines'
+ ? properties.breadcrumbs[0].label
+ : SidePanelCollapsedCategory.SHELL_ACCESS
+ : SidePanelCollapsedCategory.PROJECTS,
+ }
}
const mapDispatchToProps = (dispatch: Dispatch) => {
else navTo(cat.navTarget)
}
- const { root, unselected, selected } = classes
+ const { button, unselected, selected } = classes
return (
- <List data-cy="side-panel-collapsed" className={root}>
+ <List data-cy="side-panel-collapsed">
{sidePanelCollapsedCategories.map((cat) => (
+
<ListItem
key={cat.name}
data-cy={`collapsed-${cat.name.toLowerCase().replace(/\s+/g, '-')}`}
- className={selectedPath === cat.name ? selected : unselected}
onClick={() => handleClick(cat)}
- >
+ >
<Tooltip
+ className={selectedPath === cat.name ? selected : unselected}
title={cat.name}
disableFocusListener
- >
- {cat.icon}
+ >
+ <IconButton className={button}>{cat.icon}</IconButton>
</Tooltip>
</ListItem>
))}