1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00

feat: cr sidebar segments count (#4466)

This commit is contained in:
Mateusz Kwasniewski 2023-08-10 12:01:52 +02:00 committed by GitHub
parent df41146f50
commit 0a233ba519
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 61 additions and 3 deletions

View File

@ -0,0 +1,25 @@
import { render } from 'utils/testRenderer';
import React from 'react';
import { UpdateCount } from './ChangeRequestSidebar';
import { screen } from '@testing-library/react';
test('Show only features count when no segments', async () => {
render(<UpdateCount featuresCount={1} segmentsCount={0} />);
expect(screen.getByText('1 feature toggle')).toBeInTheDocument();
expect(screen.queryByText('0 segments')).not.toBeInTheDocument();
});
test('Show features and segments count', async () => {
render(<UpdateCount featuresCount={0} segmentsCount={1} />);
expect(screen.getByText('0 feature toggles')).toBeInTheDocument();
expect(screen.getByText('1 segment')).toBeInTheDocument();
});
test('Show features and segments plural count', async () => {
render(<UpdateCount featuresCount={2} segmentsCount={3} />);
expect(screen.getByText('2 feature toggles')).toBeInTheDocument();
expect(screen.getByText('3 segments')).toBeInTheDocument();
});

View File

@ -11,6 +11,7 @@ import useToast from 'hooks/useToast';
import { formatUnknownError } from 'utils/formatUnknownError';
import { EnvironmentChangeRequest } from './EnvironmentChangeRequest/EnvironmentChangeRequest';
import { ReviewChangesHeader } from './ReviewChangesHeader/ReviewChangesHeader';
import { ConditionallyRender } from '../../common/ConditionallyRender/ConditionallyRender';
interface IChangeRequestSidebarProps {
open: boolean;
@ -66,7 +67,10 @@ export const Separator = () => (
</Typography>
);
export const UpdateCount: FC<{ count: number }> = ({ count }) => (
export const UpdateCount: FC<{
featuresCount: number;
segmentsCount: number;
}> = ({ featuresCount, segmentsCount }) => (
<Box>
<Typography component="span" variant="body1" color="text.secondary">
Updates:{' '}
@ -77,8 +81,32 @@ export const UpdateCount: FC<{ count: number }> = ({ count }) => (
fontWeight: 'bold',
}}
>
{count} {count === 1 ? 'feature toggle' : 'feature toggles'}
{featuresCount}{' '}
{featuresCount === 1 ? 'feature toggle' : 'feature toggles'}
</Typography>
<ConditionallyRender
condition={segmentsCount > 0}
show={
<>
<Typography
component="span"
variant="body1"
color="text.secondary"
>
{' and '}
</Typography>
<Typography
component="span"
sx={{
fontWeight: 'bold',
}}
>
{segmentsCount}{' '}
{segmentsCount === 1 ? 'segment' : 'segments'}
</Typography>
</>
}
/>
</Box>
);

View File

@ -86,7 +86,12 @@ export const EnvironmentChangeRequest: FC<{
</Typography>
<Separator />
<UpdateCount
count={environmentChangeRequest.features.length}
featuresCount={
environmentChangeRequest.features.length
}
segmentsCount={
environmentChangeRequest.segments.length
}
/>
</Box>
<Box sx={{ ml: 'auto' }}>