19302: shell access in side tree Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox...

[arvados-workbench2.git] / src / views-components / side-panel / side-panel-collapsed.tsx

diff --git a/src/views-components/side-panel/side-panel-collapsed.tsx b/src/views-components/side-panel/side-panel-collapsed.tsx
index 8458daf836a51cdc46cd3ba9bb6ae9bd75aba689..9108e6200cf0ad5c61717e83c5bcc58ad672219d 100644 (file)
--- a/src/views-components/side-panel/side-panel-collapsed.tsx
+++ b/src/views-components/side-panel/side-panel-collapsed.tsx
@@ -2,9 +2,10 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import React, { ReactElement, useState } from 'react'
+import React, { ReactElement } from 'react'
 import { connect } from 'react-redux'
 import { ProjectsIcon, ProcessIcon, FavoriteIcon, ShareMeIcon, TrashIcon, PublicFavoriteIcon, GroupsIcon } from 'components/icon/icon'
+import { TerminalIcon } from 'components/icon/icon'
 import { List, ListItem, Tooltip } from '@material-ui/core'
 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles'
 import { ArvadosTheme } from 'common/custom-theme'
@@ -19,15 +20,16 @@ import {
     navigateToAllProcesses,
     navigateToTrash,
 } from 'store/navigation/navigation-action'
+import { openUserVirtualMachines } from 'store/virtual-machines/virtual-machines-actions'
+import { navigateToUserVirtualMachines } from 'store/navigation/navigation-action'
 import { RouterAction } from 'react-router-redux'
-import { Tree } from 'models/tree'
 
 type CssRules = 'root' | 'unselected' | 'selected'
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {},
     unselected: {
-        color: theme.customs.colors.grey700,
+        color: theme.customs.colors.grey600,
     },
     selected: {
         color: theme.palette.primary.main,
@@ -36,11 +38,12 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 
 enum SidePanelCollapsedCategory {
     PROJECTS = 'Home Projects',
-    SHARED_WITH_ME = 'Shared with me',
-    PUBLIC_FAVORITES = 'Public Favorites',
     FAVORITES = 'My Favorites',
-    GROUPS = 'Groups',
+    PUBLIC_FAVORITES = 'Public Favorites',
+    SHARED_WITH_ME = 'Shared with me',
     ALL_PROCESSES = 'All Processes',
+    SHELL_ACCESS = 'Shell Access',
+    GROUPS = 'Groups',
     TRASH = 'Trash',
 }
 
@@ -57,9 +60,9 @@ const sidePanelCollapsedCategories: TCollapsedCategory[] = [
         navTarget: '',
     },
     {
-        name: SidePanelCollapsedCategory.SHARED_WITH_ME,
-        icon: <ShareMeIcon />,
-        navTarget: navigateToSharedWithMe,
+        name: SidePanelCollapsedCategory.FAVORITES,
+        icon: <FavoriteIcon />,
+        navTarget: navigateToFavorites,
     },
     {
         name: SidePanelCollapsedCategory.PUBLIC_FAVORITES,
@@ -67,20 +70,25 @@ const sidePanelCollapsedCategories: TCollapsedCategory[] = [
         navTarget: navigateToPublicFavorites,
     },
     {
-        name: SidePanelCollapsedCategory.FAVORITES,
-        icon: <FavoriteIcon />,
-        navTarget: navigateToFavorites,
-    },
-    {
-        name: SidePanelCollapsedCategory.GROUPS,
-        icon: <GroupsIcon />,
-        navTarget: navigateToGroups,
+        name: SidePanelCollapsedCategory.SHARED_WITH_ME,
+        icon: <ShareMeIcon />,
+        navTarget: navigateToSharedWithMe,
     },
     {
         name: SidePanelCollapsedCategory.ALL_PROCESSES,
         icon: <ProcessIcon />,
         navTarget: navigateToAllProcesses,
     },
+    {
+        name: SidePanelCollapsedCategory.SHELL_ACCESS,
+        icon: <TerminalIcon />,
+        navTarget: navigateToUserVirtualMachines,
+    },
+    {
+        name: SidePanelCollapsedCategory.GROUPS,
+        icon: <GroupsIcon style={{marginLeft: '3px'}}/>,
+        navTarget: navigateToGroups,
+    },
     {
         name: SidePanelCollapsedCategory.TRASH,
         icon: <TrashIcon />,
@@ -88,10 +96,10 @@ const sidePanelCollapsedCategories: TCollapsedCategory[] = [
     },
 ]
 
-const mapStateToProps = (state: RootState) => {
+const mapStateToProps = ({auth, properties }: RootState) => {
     return {
-        user: state.auth.user,
-        selectedPath: state.properties.breadcrumbs[0].label,
+        user: auth.user,
+        selectedPath: properties.breadcrumbs ? properties.breadcrumbs[0].label : SidePanelCollapsedCategory.PROJECTS,
     }
 }
 
@@ -104,21 +112,20 @@ const mapDispatchToProps = (dispatch: Dispatch) => {
 
 export const SidePanelCollapsed = withStyles(styles)(
     connect(mapStateToProps, mapDispatchToProps)(({ classes, user, selectedPath, navToHome, navTo }: WithStyles & any) => {
-        const [selectedIcon, setSelectedIcon] = useState(selectedPath)
 
         const handleClick = (cat: TCollapsedCategory) => {
-            setSelectedIcon(selectedPath)
             if (cat.name === SidePanelCollapsedCategory.PROJECTS) navToHome(user.uuid)
             else navTo(cat.navTarget)
         }
 
         const { root, unselected, selected } = classes
         return (
-            <List className={root}>
+            <List data-cy="side-panel-collapsed" className={root}>
                 {sidePanelCollapsedCategories.map((cat) => (
                     <ListItem
                         key={cat.name}
-                        className={selectedIcon === cat.name ? selected : unselected}
+                        data-cy={`collapsed-${cat.name.toLowerCase().replace(/\s+/g, '-')}`}
+                        className={selectedPath === cat.name ? selected : unselected}
                         onClick={() => handleClick(cat)}
                     >
                         <Tooltip