From e5c941c68da2fe12459ab1f0cdfff1adb1fbcce8 Mon Sep 17 00:00:00 2001
From: Simon Hornby <simon@getunleash.ai>
Date: Thu, 25 Nov 2021 16:02:38 +0200
Subject: [PATCH] Fix variant list

- Fix an issue where clicking a variant in the list would popup a modal
dialog with empty details
---
 .../FeatureVariantsListItem.tsx               | 31 ++++++++++++++-----
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView2/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/FeatureVariantsListItem.tsx b/frontend/src/component/feature/FeatureView2/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/FeatureVariantsListItem.tsx
index fefb3e0e70..9c4ee10dce 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/FeatureVariantsListItem.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/FeatureVariantsListItem.tsx
@@ -23,7 +23,12 @@ const FeatureVariantListItem = ({
 
     return (
         <TableRow>
-            <TableCell onClick={editVariant} data-test={'VARIANT_NAME'}>{variant.name}</TableCell>
+            <TableCell
+                onClick={() => editVariant(variant.name)}
+                data-test={'VARIANT_NAME'}
+            >
+                {variant.name}
+            </TableCell>
             <TableCell className={styles.chipContainer}>
                 <ConditionallyRender
                     condition={variant.payload}
@@ -43,7 +48,9 @@ const FeatureVariantListItem = ({
                     }
                 />
             </TableCell>
-            <TableCell data-test={'VARIANT_WEIGHT'}>{variant.weight / 10.0} %</TableCell>
+            <TableCell data-test={'VARIANT_WEIGHT'}>
+                {variant.weight / 10.0} %
+            </TableCell>
             <TableCell data-test={'VARIANT_WEIGHT_TYPE'}>
                 {variant.weightType === FIX ? 'Fix' : 'Variable'}
             </TableCell>
@@ -52,13 +59,22 @@ const FeatureVariantListItem = ({
                 show={
                     <TableCell className={styles.actions}>
                         <div className={styles.actionsContainer}>
-                            <IconButton data-test={'VARIANT_EDIT_BUTTON'} onClick={() => editVariant(variant.name)}>
+                            <IconButton
+                                data-test={'VARIANT_EDIT_BUTTON'}
+                                onClick={() => editVariant(variant.name)}
+                            >
                                 <Edit />
                             </IconButton>
-                            <IconButton data-test={`VARIANT_DELETE_BUTTON_${variant.name}`} onClick={e => {
-                                e.stopPropagation();
-                                setDelDialog({show: true, name: variant.name });
-                            }}>
+                            <IconButton
+                                data-test={`VARIANT_DELETE_BUTTON_${variant.name}`}
+                                onClick={e => {
+                                    e.stopPropagation();
+                                    setDelDialog({
+                                        show: true,
+                                        name: variant.name,
+                                    });
+                                }}
+                            >
                                 <Delete />
                             </IconButton>
                         </div>
@@ -67,7 +83,6 @@ const FeatureVariantListItem = ({
                 elseShow={<TableCell className={styles.actions} />}
             />
         </TableRow>
-
     );
 };