From f79f57315a4844713084d74cd4e5beafcea2eefe Mon Sep 17 00:00:00 2001
From: Dylan Martin <dylan@posthog.com>
Date: Thu, 17 Oct 2024 23:52:11 +0200
Subject: [PATCH] fix(flags): better redistribute experience (#25611)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
---
 .../panels/SidePanelExperimentFeatureFlag.tsx        |  9 +++++++--
 frontend/src/lib/lemon-ui/icons/categories.ts        |  2 +-
 frontend/src/scenes/feature-flags/FeatureFlag.tsx    | 12 +++++++++---
 package.json                                         |  2 +-
 pnpm-lock.yaml                                       |  8 ++++----
 5 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelExperimentFeatureFlag.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelExperimentFeatureFlag.tsx
index e15c10ce7b0..374df90a237 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelExperimentFeatureFlag.tsx
+++ b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelExperimentFeatureFlag.tsx
@@ -1,3 +1,4 @@
+import { IconBalance } from '@posthog/icons'
 import { LemonBanner, LemonButton, LemonDivider, LemonInput, LemonTable, Link, Spinner } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { router } from 'kea-router'
@@ -99,8 +100,11 @@ export const SidePanelExperimentFeatureFlag = (): JSX.Element => {
                             title: (
                                 <div className="flex items-center justify-between space-x-2">
                                     <span>Rollout Percentage</span>
-                                    <LemonButton type="secondary" size="xsmall" onClick={distributeVariantsEqually}>
-                                        Redistribute
+                                    <LemonButton
+                                        onClick={distributeVariantsEqually}
+                                        tooltip="Redistribute variant rollout percentages equally"
+                                    >
+                                        <IconBalance />
                                     </LemonButton>
                                 </div>
                             ),
@@ -121,6 +125,7 @@ export const SidePanelExperimentFeatureFlag = (): JSX.Element => {
                                     }}
                                     min={0}
                                     max={100}
+                                    suffix={<span>%</span>}
                                 />
                             ),
                         },
diff --git a/frontend/src/lib/lemon-ui/icons/categories.ts b/frontend/src/lib/lemon-ui/icons/categories.ts
index 1b7b97b39ab..879673b1c94 100644
--- a/frontend/src/lib/lemon-ui/icons/categories.ts
+++ b/frontend/src/lib/lemon-ui/icons/categories.ts
@@ -198,7 +198,7 @@ export const TEAMS_AND_COMPANIES = {
         'IconRewindPlay',
         'IconVideoCamera',
     ],
-    'Feature Success': ['IconFlask', 'IconTestTube', 'IconMultivariateTesting', 'IconSplitTesting'],
+    'Feature Success': ['IconFlask', 'IconTestTube', 'IconMultivariateTesting', 'IconSplitTesting', 'IconBalance'],
     Pipeline: ['IconWebhooks', 'IconDecisionTree'],
     'Product OS': ['IconNotebook', 'IconHogQL', 'IconDashboard', 'IconSupport'],
     Logos: ['IconLogomark', 'IconGithub'],
diff --git a/frontend/src/scenes/feature-flags/FeatureFlag.tsx b/frontend/src/scenes/feature-flags/FeatureFlag.tsx
index 21bd124d956..c440c802862 100644
--- a/frontend/src/scenes/feature-flags/FeatureFlag.tsx
+++ b/frontend/src/scenes/feature-flags/FeatureFlag.tsx
@@ -1,6 +1,6 @@
 import './FeatureFlag.scss'
 
-import { IconCollapse, IconExpand, IconPlus, IconTrash } from '@posthog/icons'
+import { IconBalance, IconCollapse, IconExpand, IconPlus, IconTrash } from '@posthog/icons'
 import { LemonDialog, LemonSegmentedButton, LemonSkeleton, LemonSwitch } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { Form, Group } from 'kea-forms'
@@ -950,9 +950,14 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
                                     </span>
                                 </div>
                             </div>
-                            <div className="col-span-4 flex items-center gap-1">
+                            <div className="col-span-3 flex justify-between items-center gap-1">
                                 <span>Rollout</span>
-                                <LemonButton onClick={distributeVariantsEqually}>(Redistribute)</LemonButton>
+                                <LemonButton
+                                    onClick={distributeVariantsEqually}
+                                    tooltip="Normalize variant rollout percentages"
+                                >
+                                    <IconBalance />
+                                </LemonButton>
                             </div>
                         </div>
                         {variants.map((variant, index) => (
@@ -1023,6 +1028,7 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
                                                                 }
                                                             }
                                                         }}
+                                                        suffix={<span>%</span>}
                                                     />
                                                     {filterGroups.filter((group) => group.variant === variant.key)
                                                         .length > 0 && (
diff --git a/package.json b/package.json
index 90d17bccfa3..79a2a0ccdcc 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,7 @@
         "@microlink/react-json-view": "^1.21.3",
         "@monaco-editor/react": "4.6.0",
         "@posthog/hogvm": "^1.0.54",
-        "@posthog/icons": "0.8.4",
+        "@posthog/icons": "0.8.5",
         "@posthog/plugin-scaffold": "^1.4.4",
         "@react-hook/size": "^2.1.2",
         "@rrweb/types": "2.0.0-alpha.13",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6f4cf091e79..8b2f50579f6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,8 +53,8 @@ dependencies:
     specifier: ^1.0.54
     version: 1.0.54(luxon@3.5.0)
   '@posthog/icons':
-    specifier: 0.8.4
-    version: 0.8.4(react-dom@18.2.0)(react@18.2.0)
+    specifier: 0.8.5
+    version: 0.8.5(react-dom@18.2.0)(react@18.2.0)
   '@posthog/plugin-scaffold':
     specifier: ^1.4.4
     version: 1.4.4
@@ -5420,8 +5420,8 @@ packages:
       luxon: 3.5.0
     dev: false
 
-  /@posthog/icons@0.8.4(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-AMCLQ0SOcLytsjavs8FlLc52oeUdkyeoatPSPONZ9QK//Xqx967Xf3ZvFxHbOxYiKFCShd996AGqBn+5nrhxOw==}
+  /@posthog/icons@0.8.5(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-bFPMgnR3ZaNnMQ81OznYFQRd7KaCqXcI8xS3qS49UBkSZpKeJgH86JbWXBXI2q2GZWX00gc+gZxEo5EBkY7KcQ==}
     peerDependencies:
       react: '>=16.14.0'
       react-dom: '>=16.14.0'