From ec9061586f5768494ce6263218800a45b1c8be0b Mon Sep 17 00:00:00 2001
From: Youssef <khedher.youssef@hotmail.fr>
Date: Fri, 11 Feb 2022 09:34:34 +0100
Subject: [PATCH] fix: add label for the impression data

---
 .../feature/FeatureForm/FeatureForm.tsx       | 33 ++++++++++++-------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/frontend/src/component/feature/FeatureForm/FeatureForm.tsx b/frontend/src/component/feature/FeatureForm/FeatureForm.tsx
index 17d915401b..992d3f97b2 100644
--- a/frontend/src/component/feature/FeatureForm/FeatureForm.tsx
+++ b/frontend/src/component/feature/FeatureForm/FeatureForm.tsx
@@ -1,4 +1,10 @@
-import { Button, FormControl, Switch, Typography } from '@material-ui/core';
+import {
+    Button,
+    FormControl,
+    FormControlLabel,
+    Switch,
+    Typography,
+} from '@material-ui/core';
 import { useStyles } from './FeatureForm.styles';
 import FeatureTypeSelect from '../FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureTypeSelect/FeatureTypeSelect';
 import { CF_DESC_ID, CF_NAME_ID, CF_TYPE_ID } from '../../../testIds';
@@ -55,7 +61,7 @@ const FeatureForm: React.FC<IFeatureToggleForm> = ({
     const styles = useStyles();
     const { featureTypes } = useFeatureTypes();
     const history = useHistory();
-    const { permissions } = useAuthPermissions()
+    const { permissions } = useAuthPermissions();
     const editable = mode !== 'Edit';
 
     const renderToggleDescription = () => {
@@ -114,10 +120,7 @@ const FeatureForm: React.FC<IFeatureToggleForm> = ({
                         );
                     }}
                     enabled={editable}
-                    filter={projectFilterGenerator(
-                        permissions,
-                        CREATE_FEATURE
-                    )}
+                    filter={projectFilterGenerator(permissions, CREATE_FEATURE)}
                     IconComponent={KeyboardArrowDownOutlined}
                     className={styles.selectInput}
                 />
@@ -157,12 +160,20 @@ const FeatureForm: React.FC<IFeatureToggleForm> = ({
                         </a>
                     </p>
                     <div className={styles.flexRow}>
-                        <Switch
-                            name="impressionData"
-                            onChange={() => setImpressionData(!impressionData)}
-                            checked={impressionData}
+                        <FormControlLabel
+                            labelPlacement="start"
+                            style={{ marginLeft: 0 }}
+                            control={
+                                <Switch
+                                    name="impressionData"
+                                    onChange={() =>
+                                        setImpressionData(!impressionData)
+                                    }
+                                    checked={impressionData}
+                                />
+                            }
+                            label="Impression Data"
                         />
-                        <Typography>{impressionData ? 'Yes' : 'No'}</Typography>
                     </div>
                 </FormControl>
             </div>