From a80b667cf5cbf272e73ccf1978e0dfb5b6f4b98e Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 14 May 2025 14:48:46 +0200
Subject: [PATCH] chore(1-3747): minor strategy edit header updates (#9992)

Makes a few small changes to the strategy header:
- Removes the rollout percentage and environment indicator
- Changes the env disabled alert from warning to info
- Maybe moves the alert to the end of the form, only on the general tab
panel

I've placed the removal of the rollout percentage and env header behind
a flag, but not the alert changes.

Before:

![image](https://github.com/user-attachments/assets/29382afe-9a75-4138-be1c-2bab45a75787)


After:
<img width="1239" alt="image"
src="https://github.com/user-attachments/assets/db73c9c8-3244-40db-9991-c412c9aadc18"
/>
---
 .../FeatureStrategyEnabled.tsx                |  2 +-
 .../FeatureStrategyForm.tsx                   | 30 +++++++++++--------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyEnabled/FeatureStrategyEnabled.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyEnabled/FeatureStrategyEnabled.tsx
index cbc56ac539..9530a30133 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyEnabled/FeatureStrategyEnabled.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyEnabled/FeatureStrategyEnabled.tsx
@@ -35,7 +35,7 @@ export const FeatureStrategyEnabled: FC<IFeatureStrategyEnabledProps> = ({
                 </Alert>
             }
             elseShow={
-                <Alert severity='warning'>
+                <Alert severity='info'>
                     This feature flag is currently disabled in the{' '}
                     <strong>{environmentId}</strong> environment. Any changes
                     made here will not take effect until the flag has been
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
index 6584dc66bc..c7fcac4cad 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
@@ -48,6 +48,7 @@ import { Badge } from 'component/common/Badge/Badge';
 import EnvironmentIcon from 'component/common/EnvironmentIcon/EnvironmentIcon';
 import { UpgradeChangeRequests } from '../../FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/UpgradeChangeRequests/UpgradeChangeRequests.tsx';
 import { ConstraintSeparator } from 'component/common/ConstraintsList/ConstraintSeparator/ConstraintSeparator';
+import { useUiFlag } from 'hooks/useUiFlag.ts';
 
 interface IFeatureStrategyFormProps {
     feature: IFeatureToggle;
@@ -210,6 +211,7 @@ export const FeatureStrategyForm = ({
         environmentId,
     );
     const { strategyDefinition } = useStrategy(strategy?.name);
+    const addEditStrategy = useUiFlag('addEditStrategy');
 
     useEffect(() => {
         trackEvent('new-strategy-form', {
@@ -349,7 +351,10 @@ export const FeatureStrategyForm = ({
                 <StyledTitle>
                     {formatStrategyName(strategy.name || '')}
                     <ConditionallyRender
-                        condition={strategy.name === 'flexibleRollout'}
+                        condition={
+                            !addEditStrategy &&
+                            strategy.name === 'flexibleRollout'
+                        }
                         show={
                             <Badge color='success' sx={{ marginLeft: '1rem' }}>
                                 {strategy.parameters?.rollout}%
@@ -357,7 +362,7 @@ export const FeatureStrategyForm = ({
                         }
                     />
                 </StyledTitle>
-                {foundEnvironment ? (
+                {foundEnvironment && !addEditStrategy ? (
                     <StyledEnvironmentBox>
                         <EnvironmentTypographyHeader>
                             Environment:
@@ -414,16 +419,6 @@ export const FeatureStrategyForm = ({
                         </Alert>
                     }
                 />
-                <ConditionallyRender
-                    condition={!isChangeRequest}
-                    show={
-                        <FeatureStrategyEnabled
-                            projectId={feature.project}
-                            featureId={feature.name}
-                            environmentId={environmentId}
-                        />
-                    }
-                />
             </StyledAlertBox>
 
             <StyledTabs value={tab} onChange={handleChange}>
@@ -483,6 +478,17 @@ export const FeatureStrategyForm = ({
                                     }))
                                 }
                             />
+
+                            <ConditionallyRender
+                                condition={!isChangeRequest}
+                                show={
+                                    <FeatureStrategyEnabled
+                                        projectId={feature.project}
+                                        featureId={feature.name}
+                                        environmentId={environmentId}
+                                    />
+                                }
+                            />
                         </>
                     }
                 />