Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-21 13:47:39 +02:00
Code Issues Projects Releases Wiki Activity

task: added a hook for cleanly deciding new or old admin menu (#9645)

Browse Source
This commit is contained in:
Christopher Kolstad 2025-03-28 14:45:09 +01:00 committed by GitHub
parent 5da9f75014
commit 14c8b97441
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 20 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/component/layout/MainLayout/AdminMenu/AdminMenu.tsx
View File

@ -1,9 +1,8 @@
import { Grid, styled, Paper, useMediaQuery, useTheme } from '@mui/material'; import { Grid, styled, Paper, useMediaQuery, useTheme } from '@mui/material';
import { useUiFlag } from 'hooks/useUiFlag';
import type { ReactNode } from 'react'; import type { ReactNode } from 'react';
import { Sticky } from 'component/common/Sticky/Sticky'; import { Sticky } from 'component/common/Sticky/Sticky';
import { AdminMenuNavigation } from './AdminNavigationItems'; import { AdminMenuNavigation } from './AdminNavigationItems';
import { useLocation } from 'react-router-dom'; import { useNewAdminMenu } from '../../../../hooks/useNewAdminMenu';
const breakpointLgMinusPadding = 1250; const breakpointLgMinusPadding = 1250;
const breakpointLgMinusPaddingAdmin = 1550; const breakpointLgMinusPaddingAdmin = 1550;
@ -118,14 +117,10 @@ interface IWrapIfAdminSubpageProps {
} }
export const WrapIfAdminSubpage = ({ children }: IWrapIfAdminSubpageProps) => { export const WrapIfAdminSubpage = ({ children }: IWrapIfAdminSubpageProps) => {
const newAdminUIEnabled = useUiFlag('adminNavUI'); const showOnlyAdminMenu = useNewAdminMenu();
const theme = useTheme(); const theme = useTheme();
const location = useLocation();
const isSmallScreen = useMediaQuery(theme.breakpoints.down('lg')); const isSmallScreen = useMediaQuery(theme.breakpoints.down('lg'));
const showAdminMenu = const showAdminMenu = !isSmallScreen && showOnlyAdminMenu;
!isSmallScreen &&
newAdminUIEnabled &&
location.pathname.indexOf('/admin') === 0;
if (showAdminMenu) { if (showAdminMenu) {
return ( return (

11
frontend/src/component/layout/MainLayout/MainLayout.tsx
View File

@ -1,6 +1,5 @@
import { forwardRef, type ReactNode } from 'react'; import { forwardRef, type ReactNode } from 'react';
import { Box, Grid, styled, useMediaQuery, useTheme } from '@mui/material'; import { Box, Grid, styled, useMediaQuery, useTheme } from '@mui/material';
import { useLocation } from 'react-router-dom';
import Header from 'component/menu/Header/Header'; import Header from 'component/menu/Header/Header';
import Footer from 'component/menu/Footer/Footer'; import Footer from 'component/menu/Footer/Footer';
import Proclamation from 'component/common/Proclamation/Proclamation'; import Proclamation from 'component/common/Proclamation/Proclamation';
@ -18,8 +17,9 @@ import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
import { NavigationSidebar } from './NavigationSidebar/NavigationSidebar'; import { NavigationSidebar } from './NavigationSidebar/NavigationSidebar';
import { EventTimelineProvider } from 'component/events/EventTimeline/EventTimelineProvider'; import { EventTimelineProvider } from 'component/events/EventTimeline/EventTimelineProvider';
import { NewInUnleash } from './NavigationSidebar/NewInUnleash/NewInUnleash'; import { NewInUnleash } from './NavigationSidebar/NewInUnleash/NewInUnleash';
import { useUiFlag } from 'hooks/useUiFlag';
import { WrapIfAdminSubpage } from './AdminMenu/AdminMenu'; import { WrapIfAdminSubpage } from './AdminMenu/AdminMenu';
import { useNewAdminMenu } from '../../../hooks/useNewAdminMenu';
interface IMainLayoutProps { interface IMainLayoutProps {
children: ReactNode; children: ReactNode;
@ -65,18 +65,15 @@ const MainLayoutContentContainer = styled('main')(({ theme }) => ({
export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>( export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
({ children }, ref) => { ({ children }, ref) => {
const newAdminUIEnabled = useUiFlag('adminNavUI'); const showOnlyAdminMenu = useNewAdminMenu();
const { uiConfig } = useUiConfig(); const { uiConfig } = useUiConfig();
const location = useLocation();
const projectId = useOptionalPathParam('projectId'); const projectId = useOptionalPathParam('projectId');
const { isChangeRequestConfiguredInAnyEnv } = useChangeRequestsEnabled( const { isChangeRequestConfiguredInAnyEnv } = useChangeRequestsEnabled(
projectId || '', projectId || '',
); );
const theme = useTheme(); const theme = useTheme();
const isSmallScreen = useMediaQuery(theme.breakpoints.down('lg')); const isSmallScreen = useMediaQuery(theme.breakpoints.down('lg'));
const showOnlyAdminMenu =
newAdminUIEnabled && location.pathname.indexOf('/admin') === 0;
const showRegularNavigationSideBar = const showRegularNavigationSideBar =
!isSmallScreen && !showOnlyAdminMenu; !isSmallScreen && !showOnlyAdminMenu;

12
frontend/src/hooks/useNewAdminMenu.ts Normal file
View File

@ -0,0 +1,12 @@
import { useUiFlag } from './useUiFlag';
import { useLocation } from 'react-router';
export const useNewAdminMenu = () => {
const newAdminUIEnabled = useUiFlag('adminNavUI');
const location = useLocation();
return (
newAdminUIEnabled &&
(location.pathname.indexOf('/admin') === 0 ||
location.pathname.indexOf('/history') === 0)
);
};

2
src/server-dev.ts
View File

@ -57,7 +57,7 @@ process.nextTick(async () => {
filterExistingFlagNames: true, filterExistingFlagNames: true,
teamsIntegrationChangeRequests: true, teamsIntegrationChangeRequests: true,
simplifyDisableFeature: true, simplifyDisableFeature: true,
adminNavUI: false, adminNavUI: true,
tagTypeColor: true, tagTypeColor: true,
}, },
}, },