1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-09 01:17:06 +02:00

feat: rename search page and change icon (#9706)

Behind flagsReleaseManagementUI flag
This commit is contained in:
Tymoteusz Czech 2025-04-07 15:49:44 +02:00 committed by GitHub
parent 5e35a0fa22
commit 1a85b46acc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 54 additions and 33 deletions

View File

@ -1,4 +1,4 @@
import type { ComponentProps, FC } from 'react';
import { useMemo, type ComponentProps, type FC } from 'react';
import EmptyIcon from '@mui/icons-material/CheckBoxOutlineBlankOutlined';
import type SvgIcon from '@mui/material/SvgIcon/SvgIcon';
import ApplicationsIcon from '@mui/icons-material/AppsOutlined';
@ -34,6 +34,8 @@ import FactCheckOutlinedIcon from '@mui/icons-material/FactCheckOutlined';
import PersonalDashboardIcon from '@mui/icons-material/DashboardOutlined';
import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
import PlaygroundIcon from '@mui/icons-material/AutoFixNormal';
import FlagOutlinedIcon from '@mui/icons-material/FlagOutlined';
import { useUiFlag } from 'hooks/useUiFlag';
// TODO: move to routes
const icons: Record<
@ -85,12 +87,13 @@ const icons: Record<
Documentation: LibraryBooksIcon,
};
const findIcon = (key: string) => {
return icons[key] || EmptyIcon;
};
export const IconRenderer: FC<{ path: string }> = ({ path }) => {
const IconComponent = findIcon(path); // Fallback to 'default' if the type is not found
const flagsReleaseManagementUI = useUiFlag('flagsReleaseManagementUI');
const IconComponent = useMemo(() => icons[path] || EmptyIcon, [path]); // Fallback to 'default' if the type is not found
if (flagsReleaseManagementUI && path === '/search') {
return <FlagOutlinedIcon />;
}
return <IconComponent />;
};

View File

@ -13,18 +13,12 @@ import { Box, List, Typography } from '@mui/material';
import { useUiFlag } from 'hooks/useUiFlag';
import { IconRenderer } from './IconRenderer';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import SearchIcon from '@mui/icons-material/Search';
import PlaygroundIcon from '@mui/icons-material/AutoFixNormal';
import InsightsIcon from '@mui/icons-material/Insights';
import PersonalDashboardIcon from '@mui/icons-material/DashboardOutlined';
import Accordion from '@mui/material/Accordion';
import AccordionDetails from '@mui/material/AccordionDetails';
import AccordionSummary from '@mui/material/AccordionSummary';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import FlagIcon from '@mui/icons-material/OutlinedFlag';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
import SettingsIcon from '@mui/icons-material/Settings';
import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
import { useShowBadge } from 'component/layout/components/EnterprisePlanBadge/useShowBadge';
import { EnterprisePlanBadge } from 'component/layout/components/EnterprisePlanBadge/EnterprisePlanBadge';
@ -132,6 +126,7 @@ export const PrimaryNavigationList: FC<{
}> = ({ mode, onClick, activeItem }) => {
const DynamicListItem = mode === 'mini' ? MiniListItem : FullListItem;
const { isOss } = useUiConfig();
const flagsReleaseManagementUI = useUiFlag('flagsReleaseManagementUI');
return (
<List>
@ -141,7 +136,7 @@ export const PrimaryNavigationList: FC<{
onClick={() => onClick('/personal')}
selected={activeItem === '/personal'}
>
<PersonalDashboardIcon />
<IconRenderer path='/personal' />
</DynamicListItem>
<DynamicListItem
@ -150,15 +145,15 @@ export const PrimaryNavigationList: FC<{
onClick={() => onClick('/projects')}
selected={activeItem === '/projects'}
>
<ProjectIcon />
<IconRenderer path='/projects' />
</DynamicListItem>
<DynamicListItem
href='/search'
text='Search'
text={flagsReleaseManagementUI ? 'Flags overview' : 'Search'}
onClick={() => onClick('/search')}
selected={activeItem === '/search'}
>
<SearchIcon />
<IconRenderer path='/search' />
</DynamicListItem>
<DynamicListItem
href='/playground'
@ -166,21 +161,18 @@ export const PrimaryNavigationList: FC<{
onClick={() => onClick('/playground')}
selected={activeItem === '/playground'}
>
<PlaygroundIcon />
<IconRenderer path='/playground' />
</DynamicListItem>
<ConditionallyRender
condition={!isOss()}
show={
<DynamicListItem
href='/insights'
text='Insights'
onClick={() => onClick('/insights')}
selected={activeItem === '/insights'}
>
<InsightsIcon />
</DynamicListItem>
}
/>
{!isOss() ? (
<DynamicListItem
href='/insights'
text='Insights'
onClick={() => onClick('/insights')}
selected={activeItem === '/insights'}
>
<IconRenderer path='/insights' />
</DynamicListItem>
) : null}
</List>
);
};
@ -294,7 +286,7 @@ export const AdminSettingsLink: FC<{
text='Admin settings'
onClick={() => onClick('/admin')}
>
<SettingsIcon />
<IconRenderer path='/admin' />
</DynamicListItem>
</List>
</Box>

View File

@ -111,10 +111,21 @@ exports[`returns all baseRoutes 1`] = `
"menu": {
"primary": true,
},
"notFlag": "flagsReleaseManagementUI",
"path": "/search",
"title": "Search",
"type": "protected",
},
{
"component": [Function],
"flag": "flagsReleaseManagementUI",
"menu": {
"primary": true,
},
"path": "/search",
"title": "Flags overview",
"type": "protected",
},
{
"component": {
"$$typeof": Symbol(react.lazy),

View File

@ -137,13 +137,22 @@ export const routes: IRoute[] = [
menu: {},
},
// Features
// Flags overview
{
path: '/search',
title: 'Search',
component: FeatureToggleListTable,
type: 'protected',
menu: { primary: true },
notFlag: 'flagsReleaseManagementUI',
},
{
path: '/search',
title: 'Flags overview',
component: FeatureToggleListTable,
type: 'protected',
menu: { primary: true },
flag: 'flagsReleaseManagementUI',
},
// Playground

View File

@ -93,6 +93,7 @@ export type UiFlags = {
globalChangeRequestConfig?: boolean;
addEditStrategy?: boolean;
newStrategyDropdown?: boolean;
flagsReleaseManagementUI?: boolean;
};
export interface IVersionInfo {

View File

@ -67,7 +67,8 @@ export type IFlagKey =
| 'globalChangeRequestConfig'
| 'addEditStrategy'
| 'newStrategyDropdown'
| 'flagsOverviewSearch';
| 'flagsOverviewSearch'
| 'flagsReleaseManagementUI';
export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
@ -324,6 +325,10 @@ const flags: IFlags = {
process.env.UNLEASH_EXPERIMENTAL_FLAGS_OVERVIEW_SEARCH,
false,
),
flagsReleaseManagementUI: parseEnvVarBoolean(
process.env.UNLEASH_EXPERIMENTAL_FLAGS_RELEASE_MANAGEMENT_UI,
false,
),
};
export const defaultExperimentalOptions: IExperimentalOptions = {