Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-27 01:19:00 +02:00
Code Issues Projects Releases Wiki Activity

chore: remove flag sideMenuCleanup (#10093)

Browse Source 
- remove flag
- remove unused components
- adjust e2e test snapshots
This commit is contained in:
Tymoteusz Czech 2025-06-10 12:23:47 +02:00 committed by GitHub
parent ffe40cab59
commit 1e7d022b5a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 39 additions and 282 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/component/layout/MainLayout/NavigationSidebar/ConfigurationNavigationList.tsx
View File

@ -3,8 +3,6 @@ import type { INavigationMenuItem } from 'interfaces/route';
import type { NavigationMode } from './NavigationMode.ts';
import { MenuListItem } from './ListItems.tsx';
import { List } from '@mui/material';
import { IconRenderer } from './IconRenderer.tsx';
import { useUiFlag } from 'hooks/useUiFlag.ts';
import StopRoundedIcon from '@mui/icons-material/StopRounded';
import { useShowBadge } from 'component/layout/components/EnterprisePlanBadge/useShowBadge';
import { EnterprisePlanBadge } from 'component/layout/components/EnterprisePlanBadge/EnterprisePlanBadge';
@ -16,7 +14,6 @@ export const ConfigurationNavigationList: FC<{
activeItem?: string;
}> = ({ routes, mode, onClick, activeItem }) => {
const showBadge = useShowBadge();
const sideMenuCleanup = useUiFlag('sideMenuCleanup');
return (
<List>
@ -33,14 +30,8 @@ export const ConfigurationNavigationList: FC<{
) : null
}
mode={mode}
icon={
sideMenuCleanup ? (
<StopRoundedIcon fontSize='small' color='primary' />
) : (
<IconRenderer path={route.path} />
)
}
secondary={sideMenuCleanup}
icon={<StopRoundedIcon fontSize='small' color='primary' />}
secondary={true}
/>
))}
</List>

2
frontend/src/component/layout/MainLayout/NavigationSidebar/ListItems.tsx
View File

@ -204,11 +204,13 @@ export const MenuListAccordion: FC<{
sx={{ padding: 0 }}
expandIcon={mode === 'full' ? <ExpandMoreIcon /> : null}
>
{/* biome-ignore lint/a11y/useValidAriaRole: remove button role - accordion already has it */}
<ListItemButton
dense
sx={listItemButtonStyle}
selected={active && mode === 'mini'}
disableRipple
role={undefined}
>
{mode === 'mini' ? (
<Tooltip title={title} placement='right'>

13
frontend/src/component/layout/MainLayout/NavigationSidebar/MobileNavigationSidebar.tsx
View File

@ -5,17 +5,11 @@ import {
OtherLinksList,
} from './NavigationList.tsx';
import type { NewInUnleash } from './NewInUnleash/NewInUnleash.tsx';
import { ConfigurationNavigationList } from './ConfigurationNavigationList.tsx';
import { useRoutes } from './useRoutes.ts';
import { useUiFlag } from 'hooks/useUiFlag.ts';
export const MobileNavigationSidebar: FC<{
onClick: () => void;
NewInUnleash?: typeof NewInUnleash;
}> = ({ onClick, NewInUnleash }) => {
const { routes } = useRoutes();
const sideMenuCleanup = useUiFlag('sideMenuCleanup');
return (
<>
{NewInUnleash ? <NewInUnleash /> : null}
@ -24,13 +18,6 @@ export const MobileNavigationSidebar: FC<{
onClick={onClick}
setMode={() => {}}
/>
{!sideMenuCleanup ? (
<ConfigurationNavigationList
routes={routes.mainNavRoutes}
mode='full'
onClick={onClick}
/>
) : null}
<AdminSettingsLink mode={'full'} onClick={onClick} />
<OtherLinksList />
</>

110
frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx
View File

@ -6,15 +6,11 @@ import {
MenuListItem,
SignOutItem,
} from './ListItems.tsx';
import { Box, List, Typography } from '@mui/material';
import { Box, List } from '@mui/material';
import { IconRenderer } from './IconRenderer.tsx';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import FlagIcon from '@mui/icons-material/OutlinedFlag';
import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
import { useNewAdminMenu } from 'hooks/useNewAdminMenu';
import { AdminMenuNavigation } from '../AdminMenu/AdminNavigationItems.tsx';
import { useUiFlag } from 'hooks/useUiFlag.ts';
import { ConfigurationAccordion } from './ConfigurationAccordion.tsx';
export const OtherLinksList = () => {
@ -36,50 +32,6 @@ export const OtherLinksList = () => {
);
};
/**
* @deprecated remove with `sideMenuCleanup` flag
*/
export const RecentProjectsList: FC<{
projectId: string;
projectName: string;
mode: NavigationMode;
onClick: () => void;
}> = ({ projectId, projectName, mode, onClick }) => (
<List>
<MenuListItem
href={`/projects/${projectId}`}
text={projectName}
onClick={onClick}
selected={false}
mode={mode}
icon={<ProjectIcon />}
/>
</List>
);
/**
* @deprecated remove with `sideMenuCleanup` flag
*/
export const RecentFlagsList: FC<{
flags: { featureId: string; projectId: string }[];
mode: NavigationMode;
onClick: () => void;
}> = ({ flags, mode, onClick }) => (
<List>
{flags.map((flag) => (
<MenuListItem
href={`/projects/${flag.projectId}/features/${flag.featureId}`}
text={flag.featureId}
onClick={onClick}
selected={false}
key={flag.featureId}
mode={mode}
icon={<FlagIcon />}
/>
))}
</List>
);
export const PrimaryNavigationList: FC<{
mode: NavigationMode;
setMode: (mode: NavigationMode) => void;
@ -101,7 +53,6 @@ export const PrimaryNavigationList: FC<{
);
const { isOss } = useUiConfig();
const sideMenuCleanup = useUiFlag('sideMenuCleanup');
return (
<List>
@ -110,19 +61,14 @@ export const PrimaryNavigationList: FC<{
<PrimaryListItem href='/search' text='Flags overview' />
<PrimaryListItem href='/playground' text='Playground' />
{!isOss() ? (
<PrimaryListItem
href='/insights'
text={sideMenuCleanup ? 'Analytics' : 'Insights'}
/>
<PrimaryListItem href='/insights' text='Analytics' />
) : null}
{sideMenuCleanup ? (
<ConfigurationAccordion
mode={mode}
setMode={setMode}
activeItem={activeItem}
onClick={() => onClick('configure')}
/>
) : null}
</List>
);
};
@ -173,55 +119,3 @@ export const AdminSettingsLink: FC<{
</List>
</Box>
);
export const RecentProjectsNavigation: FC<{
mode: NavigationMode;
projectId: string;
onClick: () => void;
}> = ({ mode, onClick, projectId }) => {
const { project, loading } = useProjectOverview(projectId);
const projectDeleted = !project.name && !loading;
if (projectDeleted) return null;
return (
<Box>
{mode === 'full' && (
<Typography
sx={{
fontWeight: 'bold',
fontSize: 'small',
ml: 2,
mt: 1.5,
}}
>
Recent project
</Typography>
)}
<RecentProjectsList
projectId={projectId}
projectName={project.name}
mode={mode}
onClick={onClick}
/>
</Box>
);
};
export const RecentFlagsNavigation: FC<{
mode: NavigationMode;
flags: { featureId: string; projectId: string }[];
onClick: () => void;
}> = ({ mode, onClick, flags }) => {
return (
<Box>
{mode === 'full' && (
<Typography
sx={{ fontWeight: 'bold', fontSize: 'small', ml: 2 }}
>
Recent flags
</Typography>
)}
<RecentFlagsList flags={flags} mode={mode} onClick={onClick} />
</Box>
);
};

39
frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.test.tsx
View File

@ -4,12 +4,6 @@ import { screen, fireEvent, waitFor } from '@testing-library/react';
import { createLocalStorage } from 'utils/createLocalStorage';
import { Route, Routes } from 'react-router-dom';
import { listItemButtonClasses as classes } from '@mui/material/ListItemButton';
import {
type LastViewedFlag,
useLastViewedFlags,
} from 'hooks/useLastViewedFlags';
import { type FC, useEffect } from 'react';
import { useLastViewedProject } from 'hooks/useLastViewedProject';
import { testServerRoute, testServerSetup } from 'utils/testServer';
const server = testServerSetup();
@ -74,39 +68,6 @@ test('select active item', async () => {
expect(searchLink).toHaveClass(classes.selected);
});
test('print recent projects and flags', async () => {
testServerRoute(server, `/api/admin/projects/projectA/overview`, {
name: 'projectNameA',
});
const TestNavigationSidebar: FC<{
project?: string;
flags?: LastViewedFlag[];
}> = ({ project, flags }) => {
const { setLastViewed: setProject } = useLastViewedProject();
const { setLastViewed: setFlag } = useLastViewedFlags();
useEffect(() => {
setProject(project);
flags?.forEach((flag) => {
setFlag(flag);
});
}, []);
return <NavigationSidebar />;
};
render(
<TestNavigationSidebar
project={'projectA'}
flags={[{ featureId: 'featureA', projectId: 'projectB' }]}
/>,
);
await screen.findByText('projectNameA');
await screen.findByText('featureA');
});
describe('order of items in navigation', () => {
const getLinks = async () => {
const configureButton = await screen.findByRole('button', {

49
frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
View File

@ -6,15 +6,9 @@ import { useRoutes } from './useRoutes.ts';
import { useExpanded } from './useExpanded.ts';
import {
PrimaryNavigationList,
RecentFlagsNavigation,
RecentProjectsNavigation,
AdminSettingsNavigation,
} from './NavigationList.tsx';
import { ConfigurationNavigationList } from './ConfigurationNavigationList.tsx';
import { ConfigurationNavigation } from './ConfigurationNavigation.tsx';
import { useInitialPathname } from './useInitialPathname.ts';
import { useLastViewedProject } from 'hooks/useLastViewedProject';
import { useLastViewedFlags } from 'hooks/useLastViewedFlags';
import type { NewInUnleash } from './NewInUnleash/NewInUnleash.tsx';
import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@ -28,7 +22,6 @@ import { ReactComponent as LogoOnly } from 'assets/img/logoDark.svg';
import { Link } from 'react-router-dom';
import { useFlag } from '@unleash/proxy-client-react';
import { useNewAdminMenu } from 'hooks/useNewAdminMenu';
import { useUiFlag } from 'hooks/useUiFlag.ts';
export const StretchContainer = styled(Box, {
shouldForwardProp: (propName) =>
@ -95,15 +88,6 @@ export const NavigationSidebar: FC<{ NewInUnleash?: typeof NewInUnleash }> = ({
const initialPathname = useInitialPathname();
const [activeItem, setActiveItem] = useState(initialPathname);
const sideMenuCleanup = useUiFlag('sideMenuCleanup');
const { lastViewed: lastViewedProject } = useLastViewedProject();
const showRecentProject =
!sideMenuCleanup && mode === 'full' && lastViewedProject;
const { lastViewed: lastViewedFlags } = useLastViewedFlags();
const showRecentFlags =
!sideMenuCleanup && mode === 'full' && lastViewedFlags.length > 0;
useEffect(() => {
setActiveItem(initialPathname);
@ -157,23 +141,6 @@ export const NavigationSidebar: FC<{ NewInUnleash?: typeof NewInUnleash }> = ({
onClick={setActiveItem}
activeItem={activeItem}
/>
{!sideMenuCleanup ? (
<ConfigurationNavigation
expanded={expanded.includes('configure')}
onExpandChange={(expand) => {
changeExpanded('configure', expand);
}}
mode={mode}
title='Configure'
>
<ConfigurationNavigationList
routes={routes.mainNavRoutes}
mode={mode}
onClick={setActiveItem}
activeItem={activeItem}
/>
</ConfigurationNavigation>
) : null}
<AdminSettingsNavigation
onClick={setActiveItem}
@ -187,22 +154,6 @@ export const NavigationSidebar: FC<{ NewInUnleash?: typeof NewInUnleash }> = ({
routes={routes.adminRoutes}
/>
{showRecentProject && (
<RecentProjectsNavigation
mode={mode}
projectId={lastViewedProject}
onClick={() => setActiveItem('/projects')}
/>
)}
{showRecentFlags && (
<RecentFlagsNavigation
mode={mode}
flags={lastViewedFlags}
onClick={() => setActiveItem('/projects')}
/>
)}
{/* this will push the show/hide to the bottom on short nav list */}
<Box sx={{ flex: 1 }} />

50
frontend/src/component/layout/MainLayout/NavigationSidebar/__snapshots__/NavigationSidebar.test.tsx.snap
View File

@ -24,38 +24,38 @@ exports[`order of items in navigation > menu for enterprise plan 1`] = `
},
{
"icon": "InsightsIcon",
"text": "Insights",
"text": "Analytics",
},
{
"icon": "AppsOutlinedIcon",
"icon": "StopRoundedIcon",
"text": "Applications",
},
{
"icon": "AccountTreeOutlinedIcon",
"icon": "StopRoundedIcon",
"text": "Context fields",
},
{
"icon": "OutlinedFlagIcon",
"icon": "StopRoundedIcon",
"text": "Feature flag types",
},
{
"icon": "ExtensionOutlinedIcon",
"icon": "StopRoundedIcon",
"text": "Strategy types",
},
{
"icon": "CloudOutlinedIcon",
"icon": "StopRoundedIcon",
"text": "Environments",
},
{
"icon": "LabelImportantOutlinedIcon",
"icon": "StopRoundedIcon",
"text": "Tag types",
},
{
"icon": "IntegrationInstructionsOutlinedIcon",
"icon": "StopRoundedIcon",
"text": "Integrations",
},
{
"icon": "DonutLargeOutlinedIcon",
"icon": "StopRoundedIcon",
"text": "Segments",
},
{
@ -88,31 +88,31 @@ exports[`order of items in navigation > menu for open-source 1`] = `
"text": "Playground",
},
{
"icon": "AppsOutlinedIcon",
"icon": "StopRoundedIcon",
"text": "Applications",
},
{
"icon": "AccountTreeOutlinedIcon",
"icon": "StopRoundedIcon",
"text": "Context fields",
},
{
"icon": "OutlinedFlagIcon",
"icon": "StopRoundedIcon",
"text": "Feature flag types",
},
{
"icon": "ExtensionOutlinedIcon",
"icon": "StopRoundedIcon",
"text": "Strategy types",
},
{
"icon": "LabelImportantOutlinedIcon",
"icon": "StopRoundedIcon",
"text": "Tag types",
},
{
"icon": "IntegrationInstructionsOutlinedIcon",
"icon": "StopRoundedIcon",
"text": "Integrations",
},
{
"icon": "DonutLargeOutlinedIcon",
"icon": "StopRoundedIcon",
"text": "Segments",
},
{
@ -146,38 +146,38 @@ exports[`order of items in navigation > menu for pro plan 1`] = `
},
{
"icon": "InsightsIcon",
"text": "Insights",
"text": "Analytics",
},
{
"icon": "AppsOutlinedIcon",
"icon": "StopRoundedIcon",
"text": "Applications",
},
{
"icon": "AccountTreeOutlinedIcon",
"icon": "StopRoundedIcon",
"text": "Context fields",
},
{
"icon": "OutlinedFlagIcon",
"icon": "StopRoundedIcon",
"text": "Feature flag types",
},
{
"icon": "ExtensionOutlinedIcon",
"icon": "StopRoundedIcon",
"text": "Strategy types",
},
{
"icon": "CloudOutlinedIcon",
"icon": "StopRoundedIcon",
"text": "Environments",
},
{
"icon": "LabelImportantOutlinedIcon",
"icon": "StopRoundedIcon",
"text": "Tag types",
},
{
"icon": "IntegrationInstructionsOutlinedIcon",
"icon": "StopRoundedIcon",
"text": "Integrations",
},
{
"icon": "DonutLargeOutlinedIcon",
"icon": "StopRoundedIcon",
"text": "Segments",
},
{

12
frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap
View File

@ -131,18 +131,6 @@ exports[`returns all baseRoutes 1`] = `
"menu": {
"primary": true,
},
"notFlag": "sideMenuCleanup",
"path": "/insights",
"title": "Insights",
"type": "protected",
},
{
"component": [Function],
"enterprise": true,
"flag": "sideMenuCleanup",
"menu": {
"primary": true,
},
"path": "/insights",
"title": "Analytics",
"type": "protected",

12
frontend/src/component/menu/routes.ts
View File

@ -149,16 +149,7 @@ export const routes: IRoute[] = [
menu: { primary: true },
},
// Insights
{
path: '/insights',
title: 'Insights',
component: Insights,
type: 'protected',
menu: { primary: true },
enterprise: true,
notFlag: 'sideMenuCleanup',
},
// Analytics
{
path: '/insights',
title: 'Analytics',
@ -166,7 +157,6 @@ export const routes: IRoute[] = [
type: 'protected',
menu: { primary: true },
enterprise: true,
flag: 'sideMenuCleanup',
},
// Applications

1
frontend/src/interfaces/uiConfig.ts
View File

@ -91,7 +91,6 @@ export type UiFlags = {
customMetrics?: boolean;
lifecycleMetrics?: boolean;
createFlagDialogCache?: boolean;
sideMenuCleanup?: boolean;
};
export interface IVersionInfo {

7
src/lib/types/experimental.ts
View File

@ -63,8 +63,7 @@ export type IFlagKey =
| 'newGettingStartedEmail'
| 'lifecycleMetrics'
| 'customMetrics'
| 'createFlagDialogCache'
| 'sideMenuCleanup';
| 'createFlagDialogCache';
export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
@ -297,10 +296,6 @@ const flags: IFlags = {
process.env.UNLEASH_EXPERIMENTAL_CREATE_FLAG_DIALOG_CACHE,
false,
),
sideMenuCleanup: parseEnvVarBoolean(
process.env.UNLEASH_EXPERIMENTAL_SIDE_MENU_CLEANUP,
false,
),
};
export const defaultExperimentalOptions: IExperimentalOptions = {

1
src/server-dev.ts
View File

@ -56,7 +56,6 @@ process.nextTick(async () => {
reportUnknownFlags: true,
customMetrics: true,
lifecycleMetrics: true,
sideMenuCleanup: true,
},
},
authentication: {