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();
+
+ expect(screen.getByText('1 feature toggle')).toBeInTheDocument();
+ expect(screen.queryByText('0 segments')).not.toBeInTheDocument();
+});
+
+test('Show features and segments count', async () => {
+ render();
+
+ expect(screen.getByText('0 feature toggles')).toBeInTheDocument();
+ expect(screen.getByText('1 segment')).toBeInTheDocument();
+});
+
+test('Show features and segments plural count', async () => {
+ render();
+
+ 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 = () => (
);
-export const UpdateCount: FC<{ count: number }> = ({ count }) => (
+export const UpdateCount: FC<{
+ featuresCount: number;
+ segmentsCount: number;
+}> = ({ featuresCount, segmentsCount }) => (
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'}
+ 0}
+ show={
+ <>
+
+ {' and '}
+
+
+ {segmentsCount}{' '}
+ {segmentsCount === 1 ? 'segment' : 'segments'}
+
+ >
+ }
+ />
);
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<{