feat: last viewed project (#7191)

frontend/src/component/layout/MainLayout/NavigationSidebar/IconRenderer.tsx

@@ -9,14 +9,14 @@ import CustomStrategiesIcon from '@mui/icons-material/ExtensionOutlined';
 import TagTypesIcon from '@mui/icons-material/LabelImportantOutlined';
 import EnvironmentsIcon from '@mui/icons-material/CloudOutlined';
 import UsersIcon from '@mui/icons-material/GroupOutlined';
-import ServiceAccountIcon from '@mui/icons-material/SmartToyOutlined';
+import ServiceAccountIcon from '@mui/icons-material/Computer';
 import GroupsIcon from '@mui/icons-material/GroupsOutlined';
 import RoleIcon from '@mui/icons-material/AdminPanelSettingsOutlined';
 import ApiAccessIcon from '@mui/icons-material/KeyOutlined';
 import SingleSignOnIcon from '@mui/icons-material/AssignmentOutlined';
 import NetworkIcon from '@mui/icons-material/HubOutlined';
 import MaintenanceIcon from '@mui/icons-material/BuildOutlined';
-import BannersIcon from '@mui/icons-material/PhotoOutlined';
+import BannersIcon from '@mui/icons-material/ViewCarousel';
 import InstanceStatsIcon from '@mui/icons-material/QueryStatsOutlined';
 import LicenseIcon from '@mui/icons-material/ReceiptLongOutlined';
 import InstancePrivacyIcon from '@mui/icons-material/ShieldOutlined';

frontend/src/component/layout/MainLayout/NavigationSidebar/ListItems.tsx

@@ -4,7 +4,9 @@ import {
     ListItemButton,
     ListItemIcon,
     ListItemText,
+    styled,
     Tooltip,
+    Typography,
 } from '@mui/material';
 import { Link } from 'react-router-dom';
 import { basePath } from 'utils/formatPath';
@@ -19,6 +21,13 @@ const listItemButtonStyle = (theme: Theme) => ({
     },
 });
 
+const CappedText = styled(Typography)({
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    maxWidth: '160px',
+});
+
 export const FullListItem: FC<{
     href: string;
     text: string;
@@ -38,7 +47,9 @@ export const FullListItem: FC<{
                 <ListItemIcon sx={(theme) => ({ minWidth: theme.spacing(4) })}>
                     {children}
                 </ListItemIcon>
-                <ListItemText sx={{ whiteSpace: 'nowrap' }} primary={text} />
+                <ListItemText>
+                    <CappedText>{text}</CappedText>
+                </ListItemText>
                 {badge}
             </ListItemButton>
         </ListItem>

frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx

@@ -7,7 +7,7 @@ import {
     MiniListItem,
     SignOutItem,
 } from './ListItems';
-import { List, styled, Tooltip, Typography } from '@mui/material';
+import { Box, List, styled, Tooltip, Typography } from '@mui/material';
 import { IconRenderer, StyledProjectIcon } from './IconRenderer';
 import { EnterpriseBadge } from 'component/common/EnterpriseBadge/EnterpriseBadge';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
@@ -98,6 +98,27 @@ export const OtherLinksList = () => {
     );
 };
 
+export const RecentProjectsList: FC<{
+    projectId: string;
+    mode: NavigationMode;
+    onClick: () => void;
+}> = ({ projectId, mode, onClick }) => {
+    const DynamicListItem = mode === 'mini' ? MiniListItem : FullListItem;
+
+    return (
+        <List>
+            <DynamicListItem
+                href={`/projects/${projectId}`}
+                text={projectId}
+                onClick={onClick}
+                selected={false}
+            >
+                <StyledProjectIcon />
+            </DynamicListItem>
+        </List>
+    );
+};
+
 export const PrimaryNavigationList: FC<{
     mode: NavigationMode;
     onClick: (activeItem: string) => void;
@@ -177,3 +198,26 @@ export const SecondaryNavigation: FC<{
         </Accordion>
     );
 };
+
+export const RecentProjectsNavigation: FC<{
+    mode: NavigationMode;
+    projectId: string;
+    onClick: () => void;
+}> = ({ mode, onClick, projectId }) => {
+    return (
+        <Box>
+            {mode === 'full' && (
+                <Typography
+                    sx={{ fontWeight: 'bold', fontSize: 'small', mb: 1, ml: 1 }}
+                >
+                    Recent project
+                </Typography>
+            )}
+            <RecentProjectsList
+                projectId={projectId}
+                mode={mode}
+                onClick={onClick}
+            />
+        </Box>
+    );
+};

frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx

@@ -7,10 +7,12 @@ import { useExpanded } from './useExpanded';
 import {
     OtherLinksList,
     PrimaryNavigationList,
+    RecentProjectsNavigation,
     SecondaryNavigation,
     SecondaryNavigationList,
 } from './NavigationList';
 import { useInitialPathname } from './useInitialPathname';
+import { useLastViewedProject } from 'hooks/useLastViewedProject';
 
 export const MobileNavigationSidebar: FC<{ onClick: () => void }> = ({
     onClick,
@@ -37,7 +39,11 @@ export const MobileNavigationSidebar: FC<{ onClick: () => void }> = ({
 
 export const StyledBox = styled(Box)(({ theme }) => ({
     backgroundColor: theme.palette.background.paper,
-    padding: theme.spacing(2, 2, 6, 2),
+    padding: theme.spacing(2, 2, 2, 2),
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(3),
+    zIndex: theme.zIndex.tooltip,
 }));
 
 export const NavigationSidebar = () => {
@@ -49,6 +55,9 @@ export const NavigationSidebar = () => {
 
     const [activeItem, setActiveItem] = useState(initialPathname);
 
+    const { lastViewed } = useLastViewedProject();
+    const showRecentProject = mode === 'full' && lastViewed;
+
     return (
         <StyledBox>
             <PrimaryNavigationList
@@ -71,6 +80,7 @@ export const NavigationSidebar = () => {
                     activeItem={activeItem}
                 />
             </SecondaryNavigation>
+            {mode === 'full' && (
                 <SecondaryNavigation
                     expanded={expanded.includes('admin')}
                     onExpandChange={(expand) => {
@@ -86,6 +96,16 @@ export const NavigationSidebar = () => {
                         activeItem={activeItem}
                     />
                 </SecondaryNavigation>
+            )}
+
+            {showRecentProject && (
+                <RecentProjectsNavigation
+                    mode={mode}
+                    projectId={lastViewed}
+                    onClick={() => setActiveItem('/projects')}
+                />
+            )}
+
             <ShowHide
                 mode={mode}
                 onChange={() => {

frontend/src/component/layout/MainLayout/NavigationSidebar/ShowHide.tsx

@@ -1,8 +1,8 @@
 import { Box, IconButton, styled, Tooltip } from '@mui/material';
 import type { NavigationMode } from './NavigationMode';
 import type { FC } from 'react';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import HideIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
+import ExpandIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
 
 const ShowHideWrapper = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'mode',
@@ -10,7 +10,8 @@ const ShowHideWrapper = styled(Box, {
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    margin: theme.spacing(2, 1, 0, mode === 'mini' ? 1.5 : 2),
+    padding: theme.spacing(2, 1, 0, mode === 'mini' ? 1.5 : 2),
+    marginTop: 'auto',
     cursor: 'pointer',
 }));
 
@@ -32,10 +33,13 @@ export const ShowHide: FC<{ mode: NavigationMode; onChange: () => void }> = ({
             )}
             <IconButton>
                 {mode === 'full' ? (
-                    <ChevronLeftIcon />
+                    <HideIcon color='primary' />
                 ) : (
                     <Tooltip title='Expand (⌘ + B)' placement='right'>
-                        <ChevronRightIcon data-testid='expand-navigation' />
+                        <ExpandIcon
+                            data-testid='expand-navigation'
+                            color='primary'
+                        />
                     </Tooltip>
                 )}
             </IconButton>

frontend/src/hooks/useLastViewedProject.ts

@@ -5,7 +5,7 @@ import { basePath } from 'utils/formatPath';
 export const useLastViewedProject = () => {
     const key = `${basePath}:unleash-lastViewedProject`;
 
-    const [lastViewed, setLastViewed] = useState(() => {
+    const [lastViewed, setLastViewed] = useState<string | undefined>(() => {
         return getLocalStorageItem(key);
     });