1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-23 00:22:19 +01:00

feat: use update count in cr summary (#4482)

This commit is contained in:
Mateusz Kwasniewski 2023-08-11 14:59:59 +02:00 committed by GitHub
parent 12dfb1f3eb
commit 0a27b5f44a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 55 additions and 57 deletions

View File

@ -13,6 +13,7 @@ import {
} from './ChangeRequestHeader.styles';
import { Separator } from '../../ChangeRequestSidebar/ChangeRequestSidebar';
import { ChangeRequestTitle } from '../../ChangeRequestSidebar/EnvironmentChangeRequest/ChangeRequestTitle';
import { UpdateCount } from 'component/changeRequest/UpdateCount';
export const ChangeRequestHeader: FC<{ changeRequest: IChangeRequest }> = ({
changeRequest,
@ -73,18 +74,12 @@ export const ChangeRequestHeader: FC<{ changeRequest: IChangeRequest }> = ({
>
{changeRequest?.environment}
</Typography>{' '}
<Separator /> Updates:{' '}
<Typography
variant="body2"
display="inline"
fontWeight="bold"
component="span"
>
{changeRequest.features.length}{' '}
{changeRequest.features.length === 1
? 'feature toggle'
: 'feature toggles'}
</Typography>
<Separator />
Updates:
<UpdateCount
featuresCount={changeRequest.features.length}
segmentsCount={changeRequest.segments.length}
/>
</Typography>
</StyledCard>
</Box>

View File

@ -67,49 +67,6 @@ export const Separator = () => (
</Typography>
);
export const UpdateCount: FC<{
featuresCount: number;
segmentsCount: number;
}> = ({ featuresCount, segmentsCount }) => (
<Box>
<Typography component="span" variant="body1" color="text.secondary">
Updates:{' '}
</Typography>
<Typography
component="span"
sx={{
fontWeight: 'bold',
}}
>
{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>
);
export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
open,
project,

View File

@ -16,13 +16,13 @@ import {
Separator,
StyledFlexAlignCenterBox,
StyledSuccessIcon,
UpdateCount,
} from '../ChangeRequestSidebar';
import { CloudCircle } from '@mui/icons-material';
import { AddCommentField } from '../../ChangeRequestOverview/ChangeRequestComments/AddCommentField';
import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
import Input from 'component/common/Input/Input';
import { ChangeRequestTitle } from './ChangeRequestTitle';
import { UpdateCount } from 'component/changeRequest/UpdateCount';
const SubmitChangeRequestButton: FC<{ onClick: () => void; count: number }> = ({
onClick,
@ -85,6 +85,13 @@ export const EnvironmentChangeRequest: FC<{
{environmentChangeRequest.environment}
</Typography>
<Separator />
<Typography
component="span"
variant="body2"
color="text.secondary"
>
Updates:
</Typography>
<UpdateCount
featuresCount={
environmentChangeRequest.features.length

View File

@ -1,6 +1,6 @@
import { render } from 'utils/testRenderer';
import React from 'react';
import { UpdateCount } from './ChangeRequestSidebar';
import { UpdateCount } from './UpdateCount';
import { screen } from '@testing-library/react';
test('Show only features count when no segments', async () => {

View File

@ -0,0 +1,39 @@
import { FC } from 'react';
import { Box, Typography } from '@mui/material';
import { ConditionallyRender } from '../common/ConditionallyRender/ConditionallyRender';
export const UpdateCount: FC<{
featuresCount: number;
segmentsCount: number;
}> = ({ featuresCount, segmentsCount }) => (
<Box sx={{ display: 'inline', pl: 0.5 }}>
<Typography
component="span"
variant="body2"
fontWeight="bold"
display="inline"
>
{featuresCount}{' '}
{featuresCount === 1 ? 'feature toggle' : 'feature toggles'}
</Typography>
<ConditionallyRender
condition={segmentsCount > 0}
show={
<>
<Typography component="span" variant="body2">
{' and '}
</Typography>
<Typography
component="span"
variant="body2"
fontWeight="bold"
display="inline"
>
{segmentsCount}{' '}
{segmentsCount === 1 ? 'segment' : 'segments'}
</Typography>
</>
}
/>
</Box>
);