From 0a233ba519e52156d94d3fe60ebf85d4a5ea882c Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Thu, 10 Aug 2023 12:01:52 +0200
Subject: [PATCH] feat: cr sidebar segments count (#4466)

---
 .../ChangeRequestSidebar.test.tsx             | 25 +++++++++++++++
 .../ChangeRequestSidebar.tsx                  | 32 +++++++++++++++++--
 .../EnvironmentChangeRequest.tsx              |  7 +++-
 3 files changed, 61 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.test.tsx

diff --git a/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.test.tsx b/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.test.tsx
new file mode 100644
index 0000000000..cc3388aa39
--- /dev/null
+++ b/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();
+});
diff --git a/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx b/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
index ddb406d7ad..e6e84b0941 100644
--- a/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
+++ b/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>
 );
 
diff --git a/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx b/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx
index c5831b0a71..c14d79b00b 100644
--- a/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx
+++ b/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' }}>