fix(flags): better redistribute experience (#25611)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Oct 17, 2024 · f79f573 · f79f573
1 parent 3653de9
commit f79f573
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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