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)

Author: thomasheartman

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

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