feat: cr sidebar segments count (#4466)

frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.test.tsx

@@ -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();
+});

frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx

@@ -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>
 );
 

frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx

@@ -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' }}>