From 4c1d8dd4233b856064a7b1615f5b6b1ad0d71749 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Thu, 27 Jun 2024 10:04:02 +0200
Subject: [PATCH] fix: banner duplication on strategy edit with change requests
 (#7452)

## About the changes
Only one banner info about the outcome of strategy edit should appear
when change requests are enabled.


![image](https://github.com/Unleash/unleash/assets/2625371/72e734b4-14b2-4179-9d31-6382f4c9575d)


[issue/1-2292](https://linear.app/unleash/issue/1-2292/bug-do-not-show-feature-toggle-is-currently-enabled-banner-when-change)
---
 .../FeatureStrategyEnabled.tsx                | 13 ++++---
 .../FeatureStrategyForm.tsx                   | 36 ++++++-------------
 2 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyEnabled/FeatureStrategyEnabled.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyEnabled/FeatureStrategyEnabled.tsx
index e2d759f651..c3ed226192 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyEnabled/FeatureStrategyEnabled.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyEnabled/FeatureStrategyEnabled.tsx
@@ -1,4 +1,3 @@
-import type React from 'react';
 import type { FC } from 'react';
 import { Link } from 'react-router-dom';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@@ -11,14 +10,13 @@ interface IFeatureStrategyEnabledProps {
     projectId: string;
     featureId: string;
     environmentId: string;
-    children?: React.ReactNode;
+    isChangeRequest?: boolean;
 }
 
 export const FeatureStrategyEnabled: FC<IFeatureStrategyEnabledProps> = ({
     projectId,
     featureId,
     environmentId,
-    children,
 }) => {
     const featurePagePath = formatFeaturePath(projectId, featureId);
     const { feature } = useFeature(projectId, featureId);
@@ -28,7 +26,14 @@ export const FeatureStrategyEnabled: FC<IFeatureStrategyEnabledProps> = ({
     return (
         <ConditionallyRender
             condition={isFeatureEnabledInEnvironment(feature, environmentId)}
-            show={children}
+            show={
+                <Alert severity='success'>
+                    This feature flag is currently enabled in the{' '}
+                    <strong>{environmentId}</strong> environment. Any changes
+                    made here will be available to users as soon as you hit{' '}
+                    <strong>save</strong>.
+                </Alert>
+            }
             elseShow={
                 <Alert severity='warning'>
                     This feature flag is currently disabled in the{' '}
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
index 6e3b3cda4d..dfb15c3d1e 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
@@ -413,32 +413,16 @@ export const FeatureStrategyForm = ({
                         </Alert>
                     }
                 />
-                <FeatureStrategyEnabled
-                    projectId={feature.project}
-                    featureId={feature.name}
-                    environmentId={environmentId}
-                >
-                    <ConditionallyRender
-                        condition={Boolean(isChangeRequest)}
-                        show={
-                            <Alert severity='success'>
-                                This feature flag is currently enabled in the{' '}
-                                <strong>{environmentId}</strong> environment.
-                                Any changes made here will be available to users
-                                as soon as these changes are approved and
-                                applied.
-                            </Alert>
-                        }
-                        elseShow={
-                            <Alert severity='success'>
-                                This feature flag is currently enabled in the{' '}
-                                <strong>{environmentId}</strong> environment.
-                                Any changes made here will be available to users
-                                as soon as you hit <strong>save</strong>.
-                            </Alert>
-                        }
-                    />
-                </FeatureStrategyEnabled>
+                <ConditionallyRender
+                    condition={!isChangeRequest}
+                    show={
+                        <FeatureStrategyEnabled
+                            projectId={feature.project}
+                            featureId={feature.name}
+                            environmentId={environmentId}
+                        />
+                    }
+                />
             </StyledAlertBox>
 
             <StyledTabs value={tab} onChange={handleChange}>