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)
Unleash · Jan 27, 2023 · f8e3456 · f8e3456
1 parent 897e973
commit f8e3456
Showing 1 changed file with 18 additions and 6 deletions.
diff --git a/...eVariants/FeatureEnvironmentVariants/EnvironmentVariantsModal/VariantForm/VariantForm.tsx b/...eVariants/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>