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:
parent
12dfb1f3eb
commit
0a27b5f44a
@ -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>
|
||||
|
@ -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,
|
||||
|
@ -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
|
||||
|
@ -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 () => {
|
39
frontend/src/component/changeRequest/UpdateCount.tsx
Normal file
39
frontend/src/component/changeRequest/UpdateCount.tsx
Normal 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>
|
||||
);
|
Loading…
Reference in New Issue
Block a user