Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-23 01:16:27 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx
View File

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

43
frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
View File

@ -67,49 +67,6 @@ export const Separator = () => (
</Typography> </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> = ({ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
open, open,
project, project,

9
frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx
View File

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

2
frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.test.tsx → frontend/src/component/changeRequest/UpdateCount.test.tsx
View File

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

39
frontend/src/component/changeRequest/UpdateCount.tsx Normal file
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>
);