From 9fe1e9ff7d9af167f0ee350ab5a68ded128d8043 Mon Sep 17 00:00:00 2001
From: Lisa Knox <lisaknox83@gmail.com>
Date: Thu, 2 Nov 2023 14:39:55 -0400
Subject: [PATCH] 19302: side panel icons in place
 Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii.com>

---
 .../side-panel-toggle/side-panel-toggle.tsx   |   7 +-
 .../side-panel/side-panel-collapsed.tsx       | 100 ++++++++++++++++++
 .../side-panel/side-panel.tsx                 |   8 +-
 src/views/workbench/workbench.tsx             |   2 +-
 4 files changed, 112 insertions(+), 5 deletions(-)
 create mode 100644 src/views-components/side-panel/side-panel-collapsed.tsx

diff --git a/src/views-components/side-panel-toggle/side-panel-toggle.tsx b/src/views-components/side-panel-toggle/side-panel-toggle.tsx
index 0bcfbd3de9..0de66d4500 100644
--- a/src/views-components/side-panel-toggle/side-panel-toggle.tsx
+++ b/src/views-components/side-panel-toggle/side-panel-toggle.tsx
@@ -20,7 +20,8 @@ const SidePanelToggle = (props: collapseButtonProps) => {
         root: {
             width: `${COLLAPSE_ICON_SIZE}px`,
             height: `${COLLAPSE_ICON_SIZE}px`,
-            marginTop: '0.4rem'
+            marginTop: '0.4rem',
+            marginLeft: '0.6rem'
         },
         icon: {
             opacity: '0.5',
@@ -31,9 +32,9 @@ const SidePanelToggle = (props: collapseButtonProps) => {
         <IconButton style={collapseButtonIconStyles.root} onClick={() => { props.toggleSidePanel(props.isCollapsed) }}>
             <div>
                 {props.isCollapsed ?
-                    <img style={collapseButtonIconStyles.icon} src='/mui-start-icon.svg'/>
+                    <img style={collapseButtonIconStyles.icon} src='/mui-start-icon.svg' alt='an arrow pointing right'/>
                     :
-                    <img style={{ ...collapseButtonIconStyles.icon, transform: "rotate(180deg)"}} src='/mui-start-icon.svg'/>}
+                    <img style={{ ...collapseButtonIconStyles.icon, transform: "rotate(180deg)"}} src='/mui-start-icon.svg' alt='an arrow pointing right'/>}
             </div>
         </IconButton>
     </Tooltip>
diff --git a/src/views-components/side-panel/side-panel-collapsed.tsx b/src/views-components/side-panel/side-panel-collapsed.tsx
new file mode 100644
index 0000000000..e25fff6eb0
--- /dev/null
+++ b/src/views-components/side-panel/side-panel-collapsed.tsx
@@ -0,0 +1,100 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import React, { ReactElement } from 'react'
+import { ProjectIcon, ProcessIcon, FavoriteIcon, ShareMeIcon, TrashIcon, PublicFavoriteIcon, GroupsIcon } 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'
+import { navigateTo } from 'store/navigation/navigation-action'
+
+type CssRules = 'root' | 'icon'
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    root: {},
+    icon: {
+        color: theme.customs.colors.grey700,
+    },
+})
+
+enum SidePanelCollapsedCategory {
+    PROJECTS = 'Home Projects',
+    SHARED_WITH_ME = 'Shared with me',
+    PUBLIC_FAVORITES = 'Public Favorites',
+    FAVORITES = 'My Favorites',
+    TRASH = 'Trash',
+    ALL_PROCESSES = 'All Processes',
+    GROUPS = 'Groups',
+}
+
+type TCollapsedCategory = {
+    name: SidePanelCollapsedCategory
+    icon: ReactElement
+    navTarget: string
+}
+
+const sidePanelCollapsedCategories: TCollapsedCategory[] = [
+    {
+        name: SidePanelCollapsedCategory.PROJECTS,
+        icon: <ProjectIcon />,
+        navTarget: 'foo',
+    },
+    {
+        name: SidePanelCollapsedCategory.SHARED_WITH_ME,
+        icon: <ShareMeIcon />,
+        navTarget: 'foo',
+    },
+    {
+        name: SidePanelCollapsedCategory.PUBLIC_FAVORITES,
+        icon: <PublicFavoriteIcon />,
+        navTarget: 'public-favorites',
+    },
+    {
+        name: SidePanelCollapsedCategory.FAVORITES,
+        icon: <FavoriteIcon />,
+        navTarget: 'foo',
+    },
+    {
+        name: SidePanelCollapsedCategory.GROUPS,
+        icon: <GroupsIcon />,
+        navTarget: 'foo',
+    },
+    {
+        name: SidePanelCollapsedCategory.ALL_PROCESSES,
+        icon: <ProcessIcon />,
+        navTarget: 'foo',
+    },
+    {
+        name: SidePanelCollapsedCategory.TRASH,
+        icon: <TrashIcon />,
+        navTarget: 'foo',
+    },
+]
+
+export const SidePanelCollapsed = withStyles(styles)(({ classes }: WithStyles) => {
+
+    const handleClick = (navTarget: string) => {
+        console.log(navTarget)
+        navigateTo(navTarget)
+    }
+
+    return (
+        <List>
+            {sidePanelCollapsedCategories.map(cat => (
+                <ListItem
+                    key={cat.name}
+                    className={classes.icon}
+                    onClick={()=> handleClick(cat.navTarget)}
+                >
+                    <Tooltip
+                        title={cat.name}
+                        disableFocusListener
+                    >
+                        {cat.icon}
+                    </Tooltip>
+                </ListItem>
+            ))}
+        </List>
+    )
+})
diff --git a/src/views-components/side-panel/side-panel.tsx b/src/views-components/side-panel/side-panel.tsx
index 4953022d66..18aed873aa 100644
--- a/src/views-components/side-panel/side-panel.tsx
+++ b/src/views-components/side-panel/side-panel.tsx
@@ -13,6 +13,7 @@ import { Grid } from '@material-ui/core';
 import { SidePanelButton } from 'views-components/side-panel-button/side-panel-button';
 import { RootState } from 'store/store';
 import SidePanelToggle from 'views-components/side-panel-toggle/side-panel-toggle';
+import { SidePanelCollapsed } from './side-panel-collapsed';
 
 const DRAWER_WIDTH = 240;
 
@@ -47,7 +48,12 @@ export const SidePanel = withStyles(styles)(
     connect(mapStateToProps, mapDispatchToProps)(
         ({ classes, ...props }: WithStyles<CssRules> & SidePanelTreeProps & { currentRoute: string }) =>
             <Grid item xs>
-                {props.isCollapsed ? <SidePanelToggle /> :
+                {props.isCollapsed ? 
+                <>
+                    <SidePanelToggle />
+                    <SidePanelCollapsed />
+                </>
+                :
                 <>
                     <Grid className={classes.topButtonContainer}>
                         <SidePanelButton key={props.currentRoute} />
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 385ffeff40..4a2cd70098 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -292,7 +292,7 @@ const applyCollapsedState = isCollapsed => {
     const totalWidth: number = document.getElementsByClassName("splitter-layout")[0]?.clientWidth;
     const rightPanelExpandedWidth = (totalWidth - COLLAPSE_ICON_SIZE) / (totalWidth / 100);
     if (rightPanel) {
-        rightPanel.setAttribute("style", `width: ${isCollapsed ? rightPanelExpandedWidth : getSplitterInitialSize()}%`);
+        rightPanel.setAttribute("style", `width: ${isCollapsed ? `calc(${rightPanelExpandedWidth}% - 1rem)` : `${getSplitterInitialSize()}%`}`);
     }
     const splitter = document.getElementsByClassName("layout-splitter")[0];
     isCollapsed ? splitter?.classList.add("layout-splitter-disabled") : splitter?.classList.remove("layout-splitter-disabled");
-- 
2.30.2