From 8e0b75102baaf988386e6b990d8ac57291ad0773 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Tue, 28 May 2024 16:09:23 +0200
Subject: [PATCH] feat: Expand admin settings (#7192)

---
 .../NavigationSidebar/NavigationSidebar.tsx   | 94 +++++++++++--------
 .../MainLayout/NavigationSidebar/ShowHide.tsx | 17 ++++
 2 files changed, 72 insertions(+), 39 deletions(-)

diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
index 25a1c2b960..b52f3f9cff 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
@@ -1,7 +1,7 @@
 import { Box, styled } from '@mui/material';
 import { type FC, useState } from 'react';
 import { useNavigationMode } from './useNavigationMode';
-import { ShowHide } from './ShowHide';
+import { ShowAdmin, ShowHide } from './ShowHide';
 import { useRoutes } from './useRoutes';
 import { useExpanded } from './useExpanded';
 import {
@@ -37,13 +37,18 @@ export const MobileNavigationSidebar: FC<{ onClick: () => void }> = ({
     );
 };
 
-export const StyledBox = styled(Box)(({ theme }) => ({
+export const StretchContainer = styled(Box)(({ theme }) => ({
     backgroundColor: theme.palette.background.paper,
     padding: theme.spacing(2, 2, 2, 2),
+    zIndex: theme.zIndex.tooltip,
+    alignSelf: 'stretch',
+}));
+
+export const ScreenHeightBox = styled(Box)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(3),
-    zIndex: theme.zIndex.tooltip,
+    minHeight: '93vh',
 }));
 
 export const NavigationSidebar = () => {
@@ -59,59 +64,70 @@ export const NavigationSidebar = () => {
     const showRecentProject = mode === 'full' && lastViewed;
 
     return (
-        <StyledBox>
-            <PrimaryNavigationList
-                mode={mode}
-                onClick={setActiveItem}
-                activeItem={activeItem}
-            />
-            <SecondaryNavigation
-                expanded={expanded.includes('configure')}
-                onExpandChange={(expand) => {
-                    changeExpanded('configure', expand);
-                }}
-                mode={mode}
-                title='Configure'
-            >
-                <SecondaryNavigationList
-                    routes={routes.mainNavRoutes}
+        <StretchContainer>
+            <ScreenHeightBox>
+                <PrimaryNavigationList
                     mode={mode}
                     onClick={setActiveItem}
                     activeItem={activeItem}
                 />
-            </SecondaryNavigation>
-            {mode === 'full' && (
                 <SecondaryNavigation
-                    expanded={expanded.includes('admin')}
+                    expanded={expanded.includes('configure')}
                     onExpandChange={(expand) => {
-                        changeExpanded('admin', expand);
+                        changeExpanded('configure', expand);
                     }}
                     mode={mode}
-                    title='Admin'
+                    title='Configure'
                 >
                     <SecondaryNavigationList
-                        routes={routes.adminRoutes}
+                        routes={routes.mainNavRoutes}
                         mode={mode}
                         onClick={setActiveItem}
                         activeItem={activeItem}
                     />
                 </SecondaryNavigation>
-            )}
+                {mode === 'full' && (
+                    <SecondaryNavigation
+                        expanded={expanded.includes('admin')}
+                        onExpandChange={(expand) => {
+                            changeExpanded('admin', expand);
+                        }}
+                        mode={mode}
+                        title='Admin'
+                    >
+                        <SecondaryNavigationList
+                            routes={routes.adminRoutes}
+                            mode={mode}
+                            onClick={setActiveItem}
+                            activeItem={activeItem}
+                        />
+                    </SecondaryNavigation>
+                )}
 
-            {showRecentProject && (
-                <RecentProjectsNavigation
+                {mode === 'mini' && (
+                    <ShowAdmin
+                        onChange={() => {
+                            changeExpanded('admin', true);
+                            setMode('full');
+                        }}
+                    />
+                )}
+
+                {showRecentProject && (
+                    <RecentProjectsNavigation
+                        mode={mode}
+                        projectId={lastViewed}
+                        onClick={() => setActiveItem('/projects')}
+                    />
+                )}
+
+                <ShowHide
                     mode={mode}
-                    projectId={lastViewed}
-                    onClick={() => setActiveItem('/projects')}
+                    onChange={() => {
+                        setMode(mode === 'full' ? 'mini' : 'full');
+                    }}
                 />
-            )}
-
-            <ShowHide
-                mode={mode}
-                onChange={() => {
-                    setMode(mode === 'full' ? 'mini' : 'full');
-                }}
-            />
-        </StyledBox>
+            </ScreenHeightBox>
+        </StretchContainer>
     );
 };
diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/ShowHide.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/ShowHide.tsx
index 64d455e468..7ee109dcdf 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/ShowHide.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/ShowHide.tsx
@@ -3,6 +3,7 @@ import type { NavigationMode } from './NavigationMode';
 import type { FC } from 'react';
 import HideIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
 import ExpandIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
+import SettingsIcon from '@mui/icons-material/Settings';
 
 const ShowHideWrapper = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'mode',
@@ -46,3 +47,19 @@ export const ShowHide: FC<{ mode: NavigationMode; onChange: () => void }> = ({
         </ShowHideWrapper>
     );
 };
+
+const ShowAdminWrapper = styled(Box)(({ theme }) => ({
+    padding: theme.spacing(2, 1, 0, 1.5),
+}));
+
+export const ShowAdmin: FC<{ onChange: () => void }> = ({ onChange }) => {
+    return (
+        <ShowAdminWrapper onClick={onChange}>
+            <IconButton>
+                <Tooltip title='Expand admin settings' placement='right'>
+                    <SettingsIcon data-testid='expand-admin-settings' />
+                </Tooltip>
+            </IconButton>
+        </ShowAdminWrapper>
+    );
+};