mirror of
https://github.com/Unleash/unleash.git
synced 2025-06-09 01:17:06 +02:00
feat: command bar last visited: improve project/feature icons and paths (#7383)
This commit is contained in:
parent
507a2bca83
commit
50316a2f23
@ -1,4 +1,5 @@
|
|||||||
import {
|
import {
|
||||||
|
Icon,
|
||||||
List,
|
List,
|
||||||
ListItemButton,
|
ListItemButton,
|
||||||
ListItemIcon,
|
ListItemIcon,
|
||||||
@ -7,7 +8,10 @@ import {
|
|||||||
Typography,
|
Typography,
|
||||||
} from '@mui/material';
|
} from '@mui/material';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { IconRenderer } from 'component/layout/MainLayout/NavigationSidebar/IconRenderer';
|
import {
|
||||||
|
IconRenderer,
|
||||||
|
StyledProjectIcon,
|
||||||
|
} from 'component/layout/MainLayout/NavigationSidebar/IconRenderer';
|
||||||
import type { LastViewedPage } from 'hooks/useRecentlyVisited';
|
import type { LastViewedPage } from 'hooks/useRecentlyVisited';
|
||||||
import type { Theme } from '@mui/material/styles/createTheme';
|
import type { Theme } from '@mui/material/styles/createTheme';
|
||||||
|
|
||||||
@ -33,28 +37,51 @@ const StyledListItemText = styled(ListItemText)(({ theme }) => ({
|
|||||||
margin: 0,
|
margin: 0,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
const toListItemData = (lastVisited: LastViewedPage[]) => {
|
||||||
|
return lastVisited.map((item) => {
|
||||||
|
if (item.featureId) {
|
||||||
|
return {
|
||||||
|
name: item.featureId,
|
||||||
|
path: `/projects/${item.projectId}/features/${item.featureId}`,
|
||||||
|
icon: <Icon>{'flag'}</Icon>,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (item.projectId) {
|
||||||
|
return {
|
||||||
|
name: item.projectId,
|
||||||
|
path: `/projects/${item.projectId}`,
|
||||||
|
icon: <StyledProjectIcon />,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
name: item.featureId ?? item.projectId ?? item.pathName,
|
||||||
|
path: item.pathName || '/',
|
||||||
|
icon: <IconRenderer path={item.pathName ?? '/unknown'} />,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
export const RecentlyVisited = ({
|
export const RecentlyVisited = ({
|
||||||
lastVisited,
|
lastVisited,
|
||||||
}: { lastVisited: LastViewedPage[] }) => {
|
}: { lastVisited: LastViewedPage[] }) => {
|
||||||
|
const listItems = toListItemData(lastVisited);
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<StyledTypography color='textSecondary'>
|
<StyledTypography color='textSecondary'>
|
||||||
Recently visited
|
Recently visited
|
||||||
</StyledTypography>
|
</StyledTypography>
|
||||||
<List>
|
<List>
|
||||||
{lastVisited.map((item, index) => (
|
{listItems.map((item, index) => (
|
||||||
<ListItemButton
|
<ListItemButton
|
||||||
key={`recently-visited-${index}`}
|
key={`recently-visited-${index}`}
|
||||||
dense={true}
|
dense={true}
|
||||||
component={Link}
|
component={Link}
|
||||||
to={item.pathName ?? '/default'}
|
to={item.path}
|
||||||
sx={listItemButtonStyle}
|
sx={listItemButtonStyle}
|
||||||
>
|
>
|
||||||
<StyledListItemIcon>
|
<StyledListItemIcon>{item.icon}</StyledListItemIcon>
|
||||||
<IconRenderer path={item.pathName ?? '/default'} />
|
|
||||||
</StyledListItemIcon>
|
|
||||||
<StyledListItemText>
|
<StyledListItemText>
|
||||||
<Typography>{item.pathName}</Typography>
|
<Typography>{item.name}</Typography>
|
||||||
</StyledListItemText>
|
</StyledListItemText>
|
||||||
</ListItemButton>
|
</ListItemButton>
|
||||||
))}
|
))}
|
||||||
|
Loading…
Reference in New Issue
Block a user