Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

feat: command bar last visited: improve project/feature icons and paths (#7383)

Browse Source
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
1 changed files with 34 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/component/commandBar/RecentlyVisited/RecentlyVisited.tsx
View File

@ -1,4 +1,5 @@
import {
Icon,
List,
ListItemButton,
ListItemIcon,
@ -7,7 +8,10 @@ import {
Typography,
} from '@mui/material';
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 { Theme } from '@mui/material/styles/createTheme';
@ -33,28 +37,51 @@ const StyledListItemText = styled(ListItemText)(({ theme }) => ({
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 = ({
lastVisited,
}: { lastVisited: LastViewedPage[] }) => {
const listItems = toListItemData(lastVisited);
return (
<>
<StyledTypography color='textSecondary'>
Recently visited
</StyledTypography>
<List>
{lastVisited.map((item, index) => (
{listItems.map((item, index) => (
<ListItemButton
key={`recently-visited-${index}`}
dense={true}
component={Link}
to={item.pathName ?? '/default'}
to={item.path}
sx={listItemButtonStyle}
>
<StyledListItemIcon>
<IconRenderer path={item.pathName ?? '/default'} />
</StyledListItemIcon>
<StyledListItemIcon>{item.icon}</StyledListItemIcon>
<StyledListItemText>
<Typography>{item.pathName}</Typography>
<Typography>{item.name}</Typography>
</StyledListItemText>
</ListItemButton>
))}