From f5b26340e708a4f566f96760c65dea147f1ea279 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 19 Mar 2025 11:13:11 +0100
Subject: [PATCH] chore: Updates change request sidebar to remove env/cloud
 icon (#9577)

Removes the cloud icon in the change request env header to better align
with the new env headers in the flag environment overview.

Also hides strategy variants in favor of using the new strategy
execution component.

As a bonus: also uses a link component instead of a button for
navigating to the change request page.

With flag enabled:

![image](https://github.com/user-attachments/assets/0391c845-d68c-44fa-a747-1c21f5a9c2f4)


![image](https://github.com/user-attachments/assets/ac84be9b-15fb-4d0b-9737-69643332fa23)
---
 .../Changes/Change/StrategyChange.tsx         | 24 +++++++++++--------
 .../EnvironmentChangeRequest.tsx              | 24 ++++++++++---------
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx
index 79e7b7d5c7..c2e374c9ce 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx
@@ -21,6 +21,7 @@ import { flexRow } from 'themes/themeStyles';
 import { EnvironmentVariantsTable } from 'component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsTable/EnvironmentVariantsTable';
 import { ChangeOverwriteWarning } from './ChangeOverwriteWarning/ChangeOverwriteWarning';
 import type { IFeatureStrategy } from 'interfaces/strategy';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 export const ChangeItemWrapper = styled(Box)({
     display: 'flex',
@@ -271,6 +272,7 @@ const AddStrategy: FC<{
     change: IChangeRequestAddStrategy;
     actions?: ReactNode;
 }> = ({ change, actions }) => {
+    const showOldStrategyVariants = !useUiFlag('flagOverviewRedesign');
     return (
         <>
             <ChangeItemCreateEditDeleteWrapper>
@@ -303,16 +305,18 @@ const AddStrategy: FC<{
                 <div>{actions}</div>
             </ChangeItemCreateEditDeleteWrapper>
             <StrategyExecution strategy={change.payload} />
-            {change.payload.variants && change.payload.variants.length > 0 && (
-                <StyledBox>
-                    <StyledTypography>
-                        Setting strategy variants to:
-                    </StyledTypography>
-                    <EnvironmentVariantsTable
-                        variants={change.payload.variants}
-                    />
-                </StyledBox>
-            )}
+            {showOldStrategyVariants &&
+                change.payload.variants &&
+                change.payload.variants.length > 0 && (
+                    <StyledBox>
+                        <StyledTypography>
+                            Setting strategy variants to:
+                        </StyledTypography>
+                        <EnvironmentVariantsTable
+                            variants={change.payload.variants}
+                        />
+                    </StyledBox>
+                )}
         </>
     );
 };
diff --git a/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx b/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx
index 70f82da2ec..4da2f41178 100644
--- a/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx
@@ -9,7 +9,7 @@ import {
     useTheme,
 } from '@mui/material';
 import type { ChangeRequestType } from '../../changeRequest.types';
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { ChangeRequestStatusBadge } from '../../ChangeRequestStatusBadge/ChangeRequestStatusBadge';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { changesCount } from '../../changesCount';
@@ -25,6 +25,7 @@ import Input from 'component/common/Input/Input';
 import { ChangeRequestTitle } from './ChangeRequestTitle';
 import { UpdateCount } from 'component/changeRequest/UpdateCount';
 import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 const SubmitChangeRequestButton: FC<{
     onClick: () => void;
@@ -69,7 +70,7 @@ export const EnvironmentChangeRequest: FC<{
     children?: React.ReactNode;
 }> = ({ environmentChangeRequest, onClose, onReview, onDiscard, children }) => {
     const theme = useTheme();
-    const navigate = useNavigate();
+    const showCloudIcon = !useUiFlag('flagOverviewRedesign');
     const [commentText, setCommentText] = useState('');
     const { user } = useAuthUser();
     const [title, setTitle] = useState(environmentChangeRequest.title);
@@ -97,12 +98,14 @@ export const EnvironmentChangeRequest: FC<{
                             alignItems: 'center',
                         }}
                     >
-                        <CloudCircle
-                            sx={(theme) => ({
-                                color: theme.palette.primary.light,
-                                mr: 0.5,
-                            })}
-                        />
+                        {showCloudIcon ? (
+                            <CloudCircle
+                                sx={(theme) => ({
+                                    color: theme.palette.primary.light,
+                                    mr: 0.5,
+                                })}
+                            />
+                        ) : null}
                         <Typography component='span' variant='h2'>
                             {environmentChangeRequest.environment}
                         </Typography>
@@ -201,11 +204,10 @@ export const EnvironmentChangeRequest: FC<{
                                     <Button
                                         sx={{ marginLeft: 2 }}
                                         variant='outlined'
+                                        component={Link}
+                                        to={`/projects/${environmentChangeRequest.project}/change-requests/${environmentChangeRequest.id}`}
                                         onClick={() => {
                                             onClose();
-                                            navigate(
-                                                `/projects/${environmentChangeRequest.project}/change-requests/${environmentChangeRequest.id}`,
-                                            );
                                         }}
                                     >
                                         View change request page