From f8e34564aa9e2348878262296da00bfbeda36a39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Fri, 27 Jan 2023 15:02:39 +0000
Subject: [PATCH] fix: delete variant button tooltip (#3014)

Small fix on the tooltip for the "delete variant" button in the new
environment variants form.


![image](https://user-images.githubusercontent.com/14320932/215116642-0e78a2a7-71d6-4fa1-9138-6133d71ef091.png)
---
 .../VariantForm/VariantForm.tsx               | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsModal/VariantForm/VariantForm.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsModal/VariantForm/VariantForm.tsx
index 6caf70b213..b8a05773ab 100644
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsModal/VariantForm/VariantForm.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsModal/VariantForm/VariantForm.tsx
@@ -10,6 +10,7 @@ import {
     InputAdornment,
     styled,
     Switch,
+    Tooltip,
 } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { IPayload } from 'interfaces/featureToggle';
@@ -30,7 +31,7 @@ const StyledVariantForm = styled('div')(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusLarge,
 }));
 
-const StyledDeleteButton = styled(IconButton)(({ theme }) => ({
+const StyledDeleteButtonTooltip = styled(Tooltip)(({ theme }) => ({
     position: 'absolute',
     top: theme.spacing(2),
     right: theme.spacing(2),
@@ -293,12 +294,23 @@ export const VariantForm = ({
 
     return (
         <StyledVariantForm>
-            <StyledDeleteButton
-                onClick={() => removeVariant(variant.id)}
-                disabled={isProtectedVariant(variant)}
+            <StyledDeleteButtonTooltip
+                arrow
+                title={
+                    isProtectedVariant(variant)
+                        ? 'You need to have at least one variable variant'
+                        : 'Delete variant'
+                }
             >
-                <Delete />
-            </StyledDeleteButton>
+                <div>
+                    <IconButton
+                        onClick={() => removeVariant(variant.id)}
+                        disabled={isProtectedVariant(variant)}
+                    >
+                        <Delete />
+                    </IconButton>
+                </div>
+            </StyledDeleteButtonTooltip>
             <StyledTopRow>
                 <StyledNameContainer>
                     <StyledLabel>Variant name</StyledLabel>