feat: navigation sidebar stub (#7121)

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

@@ -1,5 +1,5 @@
 import { forwardRef, type ReactNode } from 'react';
-import { Grid, styled } from '@mui/material';
+import { Box, Grid, styled } from '@mui/material';
 import Header from 'component/menu/Header/Header';
 import Footer from 'component/menu/Footer/Footer';
 import Proclamation from 'component/common/Proclamation/Proclamation';
@@ -14,6 +14,8 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { DraftBanner } from './DraftBanner/DraftBanner';
 import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
+import { NavigationSidebar } from './NavigationSidebar/NavigationSidebar';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 interface IMainLayoutProps {
     children: ReactNode;
@@ -102,6 +104,7 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
         );
 
         const StyledMainLayoutContent = SpaciousMainLayoutContent;
+        const sidebarNavigationEnabled = useUiFlag('navigationSidebar');
 
         return (
             <>
@@ -117,13 +120,25 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
                             )}
                             show={<DraftBanner project={projectId || ''} />}
                         />
-                        <StyledMainLayoutContent item xs={12} sm={12} my={2}>
+                        <Box sx={{ display: 'flex', mt: '2px' }}>
+                            <ConditionallyRender
+                                condition={sidebarNavigationEnabled}
+                                show={<NavigationSidebar />}
+                            />
+                            <StyledMainLayoutContent
+                                item
+                                xs={12}
+                                sm={12}
+                                my={2}
+                            >
                                 <MainLayoutContentContainer ref={ref}>
                                     <BreadcrumbNav />
                                     <Proclamation toast={uiConfig.toast} />
                                     {children}
                                 </MainLayoutContentContainer>
                             </StyledMainLayoutContent>
+                        </Box>
+
                         <ThemeMode
                             darkmode={
                                 <StyledImg

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

@@ -0,0 +1,218 @@
+import {
+    Box,
+    List,
+    ListItem,
+    ListItemButton,
+    ListItemIcon,
+    ListItemText,
+    styled,
+    Typography,
+} from '@mui/material';
+import { Link } from 'react-router-dom';
+import SearchIcon from '@mui/icons-material/Search';
+import PlaygroundIcon from '@mui/icons-material/AutoFixNormal';
+import InsightsIcon from '@mui/icons-material/Insights';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import IntegrationsIcon from '@mui/icons-material/IntegrationInstructionsOutlined';
+import EnvironmentsIcon from '@mui/icons-material/CloudOutlined';
+import ContextFieldsIcon from '@mui/icons-material/AccountTreeOutlined';
+import SegmentsIcon from '@mui/icons-material/DonutLargeOutlined';
+import TagTypesIcon from '@mui/icons-material/LabelImportantOutlined';
+import ApplicationsIcon from '@mui/icons-material/AppsOutlined';
+import CustomStrategiesIcon from '@mui/icons-material/ExtensionOutlined';
+import UsersIcon from '@mui/icons-material/GroupOutlined';
+import ServiceAccountIcon from '@mui/icons-material/SmartToyOutlined';
+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 InstanceStatsIcon from '@mui/icons-material/QueryStatsOutlined';
+import LicenseIcon from '@mui/icons-material/ReceiptLongOutlined';
+import InstancePrivacyIcon from '@mui/icons-material/ShieldOutlined';
+import LoginHistoryIcon from '@mui/icons-material/HistoryOutlined';
+import EventLogIcon from '@mui/icons-material/EventNoteOutlined';
+import { ReactComponent as ProjectIcon } from 'assets/icons/projectIconSmall.svg';
+import type { FC } from 'react';
+
+export const StyledProjectIcon = styled(ProjectIcon)(({ theme }) => ({
+    fill: theme.palette.neutral.main,
+    stroke: theme.palette.neutral.main,
+    // same as built-in icons
+    width: theme.spacing(3),
+    height: theme.spacing(3),
+    fontSize: theme.spacing(3),
+}));
+
+const StyledListItem: FC<{ href: string; text: string }> = ({
+    href,
+    text,
+    children,
+}) => {
+    return (
+        <ListItem disablePadding>
+            <ListItemButton dense={true} component={Link} to={href}>
+                <ListItemIcon sx={(theme) => ({ minWidth: theme.spacing(4) })}>
+                    {children}
+                </ListItemIcon>
+                <ListItemText primary={text} />
+            </ListItemButton>
+        </ListItem>
+    );
+};
+
+export const StyledBox = styled(Box)(({ theme }) => ({
+    backgroundColor: theme.palette.background.paper,
+    pt: theme.spacing(3),
+    pb: theme.spacing(3),
+    minHeight: '95vh',
+}));
+
+export const NavigationSidebar = () => {
+    return (
+        <StyledBox>
+            <List>
+                <StyledListItem href='/projects' text='Projects'>
+                    <StyledProjectIcon />
+                </StyledListItem>
+                <StyledListItem href='/search' text='Search'>
+                    <SearchIcon />
+                </StyledListItem>
+                <StyledListItem href='/playground' text='Playground'>
+                    <PlaygroundIcon />
+                </StyledListItem>
+                <StyledListItem href='/insights' text='Insights'>
+                    <InsightsIcon />
+                </StyledListItem>
+            </List>
+            <Accordion disableGutters={true} sx={{ boxShadow: 'none' }}>
+                <AccordionSummary
+                    expandIcon={<ExpandMoreIcon />}
+                    aria-controls='configure-content'
+                    id='configure-header'
+                >
+                    <Typography sx={{ fontWeight: 'bold', fontSize: 'small' }}>
+                        Configure
+                    </Typography>
+                </AccordionSummary>
+                <AccordionDetails sx={{ p: 0 }}>
+                    <List>
+                        <StyledListItem
+                            href='/integrations'
+                            text='Integrations'
+                        >
+                            <IntegrationsIcon />
+                        </StyledListItem>
+                        <StyledListItem
+                            href='/environments'
+                            text='Environments'
+                        >
+                            <EnvironmentsIcon />
+                        </StyledListItem>
+                        <StyledListItem href='/context' text='Context fields'>
+                            <ContextFieldsIcon />
+                        </StyledListItem>
+                        <StyledListItem href='/segments' text='Segments'>
+                            <SegmentsIcon />
+                        </StyledListItem>
+                        <StyledListItem href='/tag-types' text='Tag types'>
+                            <TagTypesIcon />
+                        </StyledListItem>
+                        <StyledListItem
+                            href='/applications'
+                            text='Applications'
+                        >
+                            <ApplicationsIcon />
+                        </StyledListItem>
+                        <StyledListItem
+                            href='/strategies'
+                            text='Custom strategies'
+                        >
+                            <CustomStrategiesIcon />
+                        </StyledListItem>
+                    </List>
+                </AccordionDetails>
+            </Accordion>
+            <Accordion disableGutters={true} sx={{ boxShadow: 'none' }}>
+                <AccordionSummary
+                    expandIcon={<ExpandMoreIcon />}
+                    aria-controls='admin-content'
+                    id='admin-header'
+                >
+                    <Typography sx={{ fontWeight: 'bold', fontSize: 'small' }}>
+                        Admin
+                    </Typography>
+                </AccordionSummary>
+                <AccordionDetails sx={{ p: 0 }}>
+                    <List>
+                        <StyledListItem href='/admin/users' text='Users'>
+                            <UsersIcon />
+                        </StyledListItem>
+                        <StyledListItem
+                            href='/admin/service-accounts'
+                            text='Service accounts'
+                        >
+                            <ServiceAccountIcon />
+                        </StyledListItem>
+                        <StyledListItem href='/admin/groups' text='Groups'>
+                            <GroupsIcon />
+                        </StyledListItem>
+                        <StyledListItem href='/admin/roles' text='Roles'>
+                            <RoleIcon />
+                        </StyledListItem>
+                        <StyledListItem href='/admin/api' text='API Access'>
+                            <ApiAccessIcon />
+                        </StyledListItem>
+                        <StyledListItem
+                            href='/admin/auth'
+                            text='Single sign-on'
+                        >
+                            <SingleSignOnIcon />
+                        </StyledListItem>
+                        <StyledListItem href='/admin/network' text='Network'>
+                            <NetworkIcon />
+                        </StyledListItem>
+                        <StyledListItem
+                            href='/admin/maintenance'
+                            text='Maintenance'
+                        >
+                            <MaintenanceIcon />
+                        </StyledListItem>
+                        <StyledListItem href='/admin/banners' text='Banners'>
+                            <BannersIcon />
+                        </StyledListItem>
+                        <StyledListItem
+                            href='/admin/instance'
+                            text='Instance stats'
+                        >
+                            <InstanceStatsIcon />
+                        </StyledListItem>
+                        <StyledListItem href='/admin/license' text='License'>
+                            <LicenseIcon />
+                        </StyledListItem>
+                        <StyledListItem
+                            href='/admin/instance-privacy'
+                            text='Instance privacy'
+                        >
+                            <InstancePrivacyIcon />
+                        </StyledListItem>
+                        <StyledListItem
+                            href='/admin/logins'
+                            text='Login history'
+                        >
+                            <LoginHistoryIcon />
+                        </StyledListItem>
+                        <StyledListItem href='/history' text='Event log'>
+                            <EventLogIcon />
+                        </StyledListItem>
+                    </List>
+                </AccordionDetails>
+            </Accordion>
+        </StyledBox>
+    );
+};

frontend/src/interfaces/uiConfig.ts

@@ -87,6 +87,7 @@ export type UiFlags = {
     newCreateProjectUI?: boolean;
     manyStrategiesPagination?: boolean;
     enableLegacyVariants?: boolean;
+    navigationSidebar?: boolean;
 };
 
 export interface IVersionInfo {

src/lib/__snapshots__/create-config.test.ts.snap

@@ -135,6 +135,7 @@ exports[`should create default config 1`] = `
         },
       },
       "migrationLock": true,
+      "navigationSidebar": false,
       "newCreateProjectUI": false,
       "outdatedSdksBanner": false,
       "parseProjectFromSession": false,

src/lib/types/experimental.ts

@@ -63,7 +63,8 @@ export type IFlagKey =
     | 'manyStrategiesPagination'
     | 'newCreateProjectUI'
     | 'enableLegacyVariants'
-    | 'debugMetrics';
+    | 'debugMetrics'
+    | 'navigationSidebar';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
 
@@ -304,6 +305,10 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_DEBUG_METRICS,
         false,
     ),
+    navigationSidebar: parseEnvVarBoolean(
+        process.env.UNLEASH_EXPERIMENTAL_SIDEBAR_NAVIGATION,
+        false,
+    ),
 };
 
 export const defaultExperimentalOptions: IExperimentalOptions = {

src/server-dev.ts

@@ -56,6 +56,7 @@ process.nextTick(async () => {
                         createProjectWithEnvironmentConfig: true,
                         manyStrategiesPagination: true,
                         enableLegacyVariants: false,
+                        navigationSidebar: true,
                     },
                 },
                 authentication: {