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: new in unleash summary text (#7996)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-08-28 10:30:03 +02:00 committed by GitHub
parent c8f20196e0
commit d5e4544fad
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 23 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/component/layout/MainLayout/NavigationSidebar/ListItems.tsx
View File

@ -26,7 +26,7 @@ const CappedText = styled(Typography)({
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
overflow: 'hidden', overflow: 'hidden',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
maxWidth: '160px', width: '100%',
}); });
const StyledListItemIcon = styled(ListItemIcon)(({ theme }) => ({ const StyledListItemIcon = styled(ListItemIcon)(({ theme }) => ({

1
frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
View File

@ -50,6 +50,7 @@ export const StretchContainer = styled(Box)(({ theme }) => ({
gap: theme.spacing(2), gap: theme.spacing(2),
zIndex: 1, zIndex: 1,
overflowAnchor: 'none', overflowAnchor: 'none',
maxWidth: theme.spacing(40),
})); }));
// This component is needed when the sticky item could overlap with nav items. You can replicate it on a short screen. // This component is needed when the sticky item could overlap with nav items. You can replicate it on a short screen.

4
frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx
View File

@ -69,6 +69,7 @@ const StyledSignalsIcon = styled(Signals)(({ theme }) => ({
type NewItem = { type NewItem = {
label: string; label: string;
summary: string;
icon: ReactNode; icon: ReactNode;
link: string; link: string;
docsLink: string; docsLink: string;
@ -99,6 +100,7 @@ export const NewInUnleash = ({
const items: NewItem[] = [ const items: NewItem[] = [
{ {
label: 'Signals & Actions', label: 'Signals & Actions',
summary: 'Listen to signals via Webhooks',
icon: <StyledSignalsIcon />, icon: <StyledSignalsIcon />,
preview: <SignalsPreview />, preview: <SignalsPreview />,
link: '/integrations/signals', link: '/integrations/signals',
@ -174,6 +176,7 @@ export const NewInUnleash = ({
longDescription, longDescription,
docsLink, docsLink,
preview, preview,
summary,
}) => ( }) => (
<NewInUnleashItem <NewInUnleashItem
onClick={() => { onClick={() => {
@ -197,6 +200,7 @@ export const NewInUnleash = ({
preview={preview} preview={preview}
longDescription={longDescription} longDescription={longDescription}
docsLink={docsLink} docsLink={docsLink}
summary={summary}
/> />
), ),
)} )}

27
frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashItem.tsx
View File

@ -6,24 +6,26 @@ import {
ListItemButton, ListItemButton,
styled, styled,
Tooltip, Tooltip,
Typography,
} from '@mui/material'; } from '@mui/material';
import Close from '@mui/icons-material/Close'; import Close from '@mui/icons-material/Close';
import { NewInUnleashTooltip } from './NewInUnleashTooltip'; import { NewInUnleashTooltip } from './NewInUnleashTooltip';
const StyledItemButton = styled(ListItemButton)(({ theme }) => ({ const StyledItemButton = styled(ListItemButton)(({ theme }) => ({
justifyContent: 'space-between',
outline: `1px solid ${theme.palette.divider}`, outline: `1px solid ${theme.palette.divider}`,
borderRadius: theme.shape.borderRadiusMedium, borderRadius: theme.shape.borderRadiusMedium,
padding: theme.spacing(1), padding: theme.spacing(1),
})); width: '100%',
const StyledItemButtonContent = styled('div')(({ theme }) => ({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'start',
gap: theme.spacing(1), gap: theme.spacing(1),
fontSize: theme.fontSizes.smallBody, fontSize: theme.fontSizes.smallBody,
})); }));
const LabelWithSummary = styled('div')(({ theme }) => ({
flex: 1,
}));
const StyledItemButtonClose = styled(IconButton)(({ theme }) => ({ const StyledItemButtonClose = styled(IconButton)(({ theme }) => ({
padding: theme.spacing(0.25), padding: theme.spacing(0.25),
})); }));
@ -37,6 +39,7 @@ interface INewInUnleashItemProps {
link: string; link: string;
docsLink: string; docsLink: string;
preview?: ReactNode; preview?: ReactNode;
summary: string;
} }
const useTooltip = () => { const useTooltip = () => {
@ -62,6 +65,7 @@ export const NewInUnleashItem = ({
link, link,
docsLink, docsLink,
preview, preview,
summary,
}: INewInUnleashItemProps) => { }: INewInUnleashItemProps) => {
const { open, handleTooltipOpen, handleTooltipClose } = useTooltip(); const { open, handleTooltipOpen, handleTooltipClose } = useTooltip();
@ -88,11 +92,14 @@ export const NewInUnleashItem = ({
preview={preview} preview={preview}
> >
<StyledItemButton> <StyledItemButton>
<StyledItemButtonContent> {icon}
{icon} <LabelWithSummary>
{label} <Typography fontWeight='bold' fontSize='small'>
</StyledItemButtonContent> {label}
<Tooltip title='Dismiss' arrow> </Typography>
<Typography fontSize='small'>{summary}</Typography>
</LabelWithSummary>
<Tooltip title='Dismiss' arrow sx={{ marginLeft: 'auto' }}>
<StyledItemButtonClose <StyledItemButtonClose
aria-label='dismiss' aria-label='dismiss'
onClick={onDismissClick} onClick={onDismissClick}