From c9c5cf5364d983a20eb784965acba7a44c9d12cd Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Thu, 17 Nov 2022 15:40:45 +0100
Subject: [PATCH] conditional message for change request strategy form (#2465)

---
 .../FeatureStrategyEnabled.tsx                | 16 ++++---------
 .../FeatureStrategyForm.tsx                   | 24 +++++++++++++++++--
 2 files changed, 27 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 3ad8820e96..f950cd6178 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyEnabled/FeatureStrategyEnabled.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyEnabled/FeatureStrategyEnabled.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { Link } from 'react-router-dom';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { Alert } from '@mui/material';
@@ -12,11 +12,12 @@ interface IFeatureStrategyEnabledProps {
     environmentId: string;
 }
 
-export const FeatureStrategyEnabled = ({
+export const FeatureStrategyEnabled: FC<IFeatureStrategyEnabledProps> = ({
     projectId,
     featureId,
     environmentId,
-}: IFeatureStrategyEnabledProps) => {
+    children,
+}) => {
     const featurePagePath = formatFeaturePath(projectId, featureId);
     const { feature } = useFeature(projectId, featureId);
 
@@ -29,14 +30,7 @@ export const FeatureStrategyEnabled = ({
     return (
         <ConditionallyRender
             condition={isFeatureEnabledInEnvironment(feature, environmentId)}
-            show={
-                <Alert severity="success">
-                    This feature toggle 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>
-            }
+            show={children}
             elseShow={
                 <Alert severity="warning">
                     This feature toggle 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 7525265cb5..dc819102c5 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Button } from '@mui/material';
+import { Alert, Button } from '@mui/material';
 import {
     IFeatureStrategy,
     IFeatureStrategyParameters,
@@ -141,7 +141,27 @@ export const FeatureStrategyForm = ({
                 projectId={feature.project}
                 featureId={feature.name}
                 environmentId={environmentId}
-            />
+            >
+                <ConditionallyRender
+                    condition={Boolean(isChangeRequest)}
+                    show={
+                        <Alert severity="success">
+                            This feature toggle 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 toggle 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>
             <hr className={styles.hr} />
             <ConditionallyRender
                 condition={Boolean(uiConfig.flags.SE)}