1
0
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:
David Leek 2024-06-13 09:43:39 +02:00 committed by GitHub
parent 507a2bca83
commit 50316a2f23
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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>
))} ))}