From 7d814a623fd105b9d06c650067617ad3df8c7720 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Wed, 25 Jan 2023 14:49:01 +0000
Subject: [PATCH] fix: small fixes on variants push to env UI (#2991)

https://linear.app/unleash/issue/2-652/slight-improvements-and-fixes-on-the-push-to-environment-feature

Includes:

- Hover effect on the items should cover the full width of the menu;
- Clicking anywhere on the item should toggle the check;
- Small refactoring


![image](https://user-images.githubusercontent.com/14320932/214592250-05ecc584-3b6b-49f4-93a5-4d3323cd9cde.png)
---
 .../PushVariantsButton/PushVariantsButton.tsx | 92 ++++++++++---------
 1 file changed, 48 insertions(+), 44 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/PushVariantsButton/PushVariantsButton.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/PushVariantsButton/PushVariantsButton.tsx
index 6d55ce3a12..98f2d363e6 100644
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/PushVariantsButton/PushVariantsButton.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/PushVariantsButton/PushVariantsButton.tsx
@@ -2,7 +2,6 @@ import {
     Button,
     Checkbox,
     Divider,
-    FormControlLabel,
     Menu,
     MenuItem,
     styled,
@@ -13,19 +12,22 @@ import { useState } from 'react';
 import { useCheckProjectAccess } from 'hooks/useHasAccess';
 
 const StyledMenu = styled(Menu)(({ theme }) => ({
-    '&>div>ul': {
+    '& > div > ul': {
         display: 'flex',
         flexDirection: 'column',
         justifyContent: 'center',
-        padding: theme.spacing(2),
-        '&>li': {
-            padding: theme.spacing(0),
+        '& > li': {
+            padding: theme.spacing(0, 1),
         },
     },
 }));
 
+const StyledActions = styled('div')(({ theme }) => ({
+    margin: theme.spacing(1, 2),
+}));
+
 const StyledButton = styled(Button)(({ theme }) => ({
-    marginTop: theme.spacing(1),
+    marginTop: theme.spacing(2),
 }));
 
 interface IPushVariantsButtonProps {
@@ -77,6 +79,16 @@ export const PushVariantsButton = ({
         );
     };
 
+    const toggleSelectedEnvironment = (
+        environment: IFeatureEnvironmentWithCrEnabled
+    ) => {
+        if (selectedEnvironments.includes(environment)) {
+            removeSelectedEnvironment(environment);
+        } else {
+            addSelectedEnvironment(environment);
+        }
+    };
+
     const cleanupState = () => {
         setSelectedEnvironments([]);
         setPushToAnchorEl(null);
@@ -115,47 +127,39 @@ export const PushVariantsButton = ({
                         {environments
                             .filter(environment => environment.name !== current)
                             .map(otherEnvironment => (
-                                <MenuItem key={otherEnvironment.name}>
-                                    <FormControlLabel
-                                        disabled={
-                                            !hasAccessTo[
-                                                otherEnvironment.name
-                                            ] ?? false
-                                        }
-                                        control={
-                                            <Checkbox
-                                                onChange={event => {
-                                                    if (event.target.checked) {
-                                                        addSelectedEnvironment(
-                                                            otherEnvironment
-                                                        );
-                                                    } else {
-                                                        removeSelectedEnvironment(
-                                                            otherEnvironment
-                                                        );
-                                                    }
-                                                }}
-                                                checked={selectedEnvironments.includes(
-                                                    otherEnvironment
-                                                )}
-                                                value={otherEnvironment.name}
-                                            />
-                                        }
-                                        label={otherEnvironment.name}
+                                <MenuItem
+                                    key={otherEnvironment.name}
+                                    disabled={
+                                        !hasAccessTo[otherEnvironment.name] ??
+                                        false
+                                    }
+                                    onClick={() =>
+                                        toggleSelectedEnvironment(
+                                            otherEnvironment
+                                        )
+                                    }
+                                >
+                                    <Checkbox
+                                        checked={selectedEnvironments.includes(
+                                            otherEnvironment
+                                        )}
                                     />
+                                    {otherEnvironment.name}
                                 </MenuItem>
                             ))}
-                        <Divider />
-                        <StyledButton
-                            variant="outlined"
-                            onClick={() => {
-                                onSubmit(selectedEnvironments);
-                                cleanupState();
-                            }}
-                            disabled={selectedEnvironments.length === 0}
-                        >
-                            Push to selected ({selectedEnvironments.length})
-                        </StyledButton>
+                        <StyledActions>
+                            <Divider />
+                            <StyledButton
+                                variant="outlined"
+                                onClick={() => {
+                                    onSubmit(selectedEnvironments);
+                                    cleanupState();
+                                }}
+                                disabled={selectedEnvironments.length === 0}
+                            >
+                                Push to selected ({selectedEnvironments.length})
+                            </StyledButton>
+                        </StyledActions>
                     </StyledMenu>
                 </>
             }