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:
parent
5e35a0fa22
commit
1a85b46acc
@ -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 />;
|
||||
};
|
||||
|
@ -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>
|
||||
|
@ -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),
|
||||
|
@ -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
|
||||
|
@ -93,6 +93,7 @@ export type UiFlags = {
|
||||
globalChangeRequestConfig?: boolean;
|
||||
addEditStrategy?: boolean;
|
||||
newStrategyDropdown?: boolean;
|
||||
flagsReleaseManagementUI?: boolean;
|
||||
};
|
||||
|
||||
export interface IVersionInfo {
|
||||
|
@ -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 = {
|
||||
|
Loading…
Reference in New Issue
Block a user