From 01c1ec5c295d6616f976159889fa7a1c1e8943eb Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Tue, 15 Apr 2025 13:11:11 +0300
Subject: [PATCH] feat: strategy status as checkbox (#9760)

---
 .../FeatureStrategyEnabledDisabled.tsx        | 43 ++++++++++++-------
 .../FeatureStrategyForm.tsx                   | 17 ++++----
 2 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyEnabledDisabled/FeatureStrategyEnabledDisabled.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyEnabledDisabled/FeatureStrategyEnabledDisabled.tsx
index c72bfb8027..40f18e4ca9 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyEnabledDisabled/FeatureStrategyEnabledDisabled.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyEnabledDisabled/FeatureStrategyEnabledDisabled.tsx
@@ -2,7 +2,7 @@ import {
     Box,
     FormControlLabel,
     styled,
-    Switch,
+    Checkbox,
     Typography,
 } from '@mui/material';
 import type { VFC } from 'react';
@@ -14,11 +14,15 @@ interface IFeatureStrategyEnabledDisabledProps {
 
 const StyledBox = styled(Box)(({ theme }) => ({
     display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    backgroundColor: theme.palette.background.elevation1,
+    flexDirection: 'column',
     padding: theme.spacing(2),
-    borderRadius: `${theme.shape.borderRadiusMedium}px`,
+    borderRadius: theme.shape.borderRadiusMedium,
+}));
+
+const StyledCheckboxRow = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    marginTop: theme.spacing(1),
 }));
 
 export const FeatureStrategyEnabledDisabled: VFC<
@@ -26,17 +30,24 @@ export const FeatureStrategyEnabledDisabled: VFC<
 > = ({ enabled, onToggleEnabled }) => {
     return (
         <StyledBox>
-            <Typography>Strategy Status</Typography>
-            <FormControlLabel
-                control={
-                    <Switch
-                        name='enabled'
-                        onChange={onToggleEnabled}
-                        checked={enabled}
-                    />
-                }
-                label='Enabled'
-            />
+            <Typography variant='body2' fontWeight='bold'>
+                Strategy Status
+            </Typography>
+            <StyledCheckboxRow>
+                <FormControlLabel
+                    control={
+                        <Checkbox
+                            name='enabled'
+                            onChange={onToggleEnabled}
+                            checked={enabled}
+                        />
+                    }
+                    label={<Typography variant='body2'>Active</Typography>}
+                />
+                <Typography variant='body2' color='text.secondary'>
+                    Strategy will be exposed when environment is enabled
+                </Typography>
+            </StyledCheckboxRow>
         </StyledBox>
     );
 };
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
index 0929d6ae11..51e9099a27 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
@@ -466,6 +466,14 @@ export const FeatureStrategyForm = ({
                                 }}
                             />
 
+                            <FeatureStrategyType
+                                strategy={strategy}
+                                strategyDefinition={strategyDefinition}
+                                setStrategy={setStrategy}
+                                validateParameter={validateParameter}
+                                errors={errors}
+                                hasAccess={access}
+                            />
                             <FeatureStrategyEnabledDisabled
                                 enabled={!strategy?.disabled}
                                 onToggleEnabled={() =>
@@ -475,15 +483,6 @@ export const FeatureStrategyForm = ({
                                     }))
                                 }
                             />
-
-                            <FeatureStrategyType
-                                strategy={strategy}
-                                strategyDefinition={strategyDefinition}
-                                setStrategy={setStrategy}
-                                validateParameter={validateParameter}
-                                errors={errors}
-                                hasAccess={access}
-                            />
                         </>
                     }
                 />