From 0a27b5f44a5bd1486f6ce70e63c0196ad8a4d01b Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Fri, 11 Aug 2023 14:59:59 +0200
Subject: [PATCH] feat: use update count in cr summary (#4482)

---
 .../ChangeRequestHeader.tsx                   | 19 +++-----
 .../ChangeRequestSidebar.tsx                  | 43 -------------------
 .../EnvironmentChangeRequest.tsx              |  9 +++-
 ...tSidebar.test.tsx => UpdateCount.test.tsx} |  2 +-
 .../component/changeRequest/UpdateCount.tsx   | 39 +++++++++++++++++
 5 files changed, 55 insertions(+), 57 deletions(-)
 rename frontend/src/component/changeRequest/{ChangeRequestSidebar/ChangeRequestSidebar.test.tsx => UpdateCount.test.tsx} (94%)
 create mode 100644 frontend/src/component/changeRequest/UpdateCount.tsx

diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx
index fcb84e9de9..b887339110 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx
@@ -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>
diff --git a/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx b/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
index e6e84b0941..2725b8ff1c 100644
--- a/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
@@ -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,
diff --git a/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx b/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx
index c14d79b00b..73b306af4c 100644
--- a/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx
@@ -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
diff --git a/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.test.tsx b/frontend/src/component/changeRequest/UpdateCount.test.tsx
similarity index 94%
rename from frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.test.tsx
rename to frontend/src/component/changeRequest/UpdateCount.test.tsx
index cc3388aa39..3a0b28cc77 100644
--- a/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.test.tsx
+++ b/frontend/src/component/changeRequest/UpdateCount.test.tsx
@@ -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 () => {
diff --git a/frontend/src/component/changeRequest/UpdateCount.tsx b/frontend/src/component/changeRequest/UpdateCount.tsx
new file mode 100644
index 0000000000..ffd9360e7f
--- /dev/null
+++ b/frontend/src/component/changeRequest/UpdateCount.tsx
@@ -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>
+);