Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-13 13:48:59 +02:00
Code Issues Projects Releases Wiki Activity

chore: replace flags per user with total number of flags (#10102)

Browse Source 
Switches the "flags per user" box with a "total number of flags" label
for the number in the box and an additional description available via
the help icon.

To accurately label the help text and link it to the figure, I've added
a tooltipId prop to the HelpIcon component.

<img width="551" alt="image"
src="https://github.com/user-attachments/assets/f3227e74-5976-454e-9b7d-db0d05927261"
/>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Thomas Heartman 2025-06-10 10:02:50 +02:00 committed by GitHub
parent f0c19af5a9
commit 6d7a344ca3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 76 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/component/common/HelpIcon/HelpIcon.tsx
View File

@ -29,6 +29,7 @@ const StyledContainer = styled('span')<{ size: string | undefined }>(
type IHelpIconProps = {
tooltip: React.ReactNode;
tooltipId?: string;
placement?: TooltipProps['placement'];
children?: React.ReactNode;
size?: string;
@ -43,6 +44,7 @@ type IHelpIconProps = {
export const HelpIcon = ({
tooltip,
htmlTooltip,
tooltipId,
placement,
children,
size,
@ -55,6 +57,7 @@ export const HelpIcon = ({
return (
<HtmlTooltip
id={tooltipId}
title={tooltip}
placement={placement}
arrow
@ -68,7 +71,7 @@ export const HelpIcon = ({
}
return (
<Tooltip title={tooltip} placement={placement} arrow>
<Tooltip title={tooltip} placement={placement} arrow id={tooltipId}>
<StyledContainer size={size} tabIndex={0} aria-label='Help'>
{children ?? <HelpOutline />}
</StyledContainer>

99
frontend/src/component/insights/componentsStat/FlagStats/FlagStats.tsx
View File

@ -1,6 +1,11 @@
import Icon from '@mui/material/Icon';
import { Box, Typography, styled } from '@mui/material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { useUiFlag } from 'hooks/useUiFlag';
import { useId } from 'hooks/useId';
import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly';
import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
import InfoOutlined from '@mui/icons-material/InfoOutlined';
const StyledRingContainer = styled(Box)(({ theme }) => ({
display: 'flex',
@ -65,9 +70,16 @@ const StyledIcon = styled(Icon)(({ theme }) => ({
fontSize: '15px!important',
}));
const LabelContainer = styled('div')({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
});
interface IFlagStatsProps {
count: number;
flagsPerUser?: string;
flagsPerUser?: string; // todo: remove this prop with the lifecycleMetrics flag
isLoading?: boolean;
}
@ -76,41 +88,74 @@ export const FlagStats: React.FC<IFlagStatsProps> = ({
flagsPerUser,
isLoading,
}) => {
const hideFlagsPerUser = useUiFlag('lifecycleMetrics');
const labelId = hideFlagsPerUser ? useId() : '';
const descriptionId = hideFlagsPerUser ? useId() : '';
return (
<>
<StyledRingContainer>
<StyledRing>
<StyledRingContent>
{isLoading ? '' : count}
<StyledRingContent
{...(hideFlagsPerUser && {
'aria-labelledby': labelId,
'aria-describedby': descriptionId,
})}
>
{isLoading ? (
<ScreenReaderOnly>
Loading total flag count
</ScreenReaderOnly>
) : (
count
)}
</StyledRingContent>
</StyledRing>
</StyledRingContainer>
<ConditionallyRender
condition={flagsPerUser !== undefined && flagsPerUser !== ''}
show={
<StyledInsightsContainer>
<StyledTextContainer>
<StyledHeaderContainer>
<StyledIcon>award_star</StyledIcon>
<Typography
fontWeight='bold'
variant='body2'
color='primary'
>
Insights
{hideFlagsPerUser ? (
<LabelContainer>
<Typography id={labelId} variant='body2'>
Total number of flags
</Typography>
<HelpIcon
htmlTooltip
tooltipId={descriptionId}
tooltip={
'This includes the four lifecycle stages define, develop, production, and cleanup'
}
>
<InfoOutlined />
</HelpIcon>
</LabelContainer>
) : (
<ConditionallyRender
condition={
flagsPerUser !== undefined && flagsPerUser !== ''
}
show={
<StyledInsightsContainer>
<StyledTextContainer>
<StyledHeaderContainer>
<StyledIcon>award_star</StyledIcon>
<Typography
fontWeight='bold'
variant='body2'
color='primary'
>
Insights
</Typography>
</StyledHeaderContainer>
<Typography variant='body2'>
Flags per user
</Typography>
</StyledHeaderContainer>
<Typography variant='body2'>
Flags per user
</Typography>
</StyledTextContainer>
<StyledFlagCountPerUser>
{flagsPerUser}
</StyledFlagCountPerUser>
</StyledInsightsContainer>
}
/>
</StyledTextContainer>
<StyledFlagCountPerUser>
{flagsPerUser}
</StyledFlagCountPerUser>
</StyledInsightsContainer>
}
/>
)}
</>
);
};