here's the change

PostHog · Oct 23, 2024 · f0b1204 · f0b1204
1 parent afc3628
commit f0b1204
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelExperimentFeatureFlag.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelExperimentFeatureFlag.tsx
@@ -1,4 +1,3 @@
-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'
@@ -32,7 +31,8 @@ export const SidePanelExperimentFeatureFlag = (): JSX.Element => {
     const { experiment } = useValues(experimentLogic({ experimentId: experimentId ?? 'new' }))
 
     const _featureFlagLogic = featureFlagLogic({ id: experiment.feature_flag?.id ?? null } as FeatureFlagLogicProps)
-    const { featureFlag, areVariantRolloutsValid, variantRolloutSum, featureFlagLoading } = useValues(_featureFlagLogic)
+    const { featureFlag, areVariantRolloutsValid, variantRolloutSum, featureFlagLoading, nonEmptyVariants } =
+        useValues(_featureFlagLogic)
     const { setFeatureFlagFilters, saveSidebarExperimentFeatureFlag, distributeVariantsEqually } =
         useActions(_featureFlagLogic)
 
@@ -100,11 +100,8 @@ export const SidePanelExperimentFeatureFlag = (): JSX.Element => {
                             title: (
                                 <div className="flex items-center justify-between space-x-2">
                                     <span>Rollout Percentage</span>
-                                    <LemonButton
-                                        onClick={distributeVariantsEqually}
-                                        tooltip="Redistribute variant rollout percentages equally"
-                                    >
-                                        <IconBalance />
+                                    <LemonButton type="secondary" size="xsmall" onClick={distributeVariantsEqually}>
+                                        Redistribute
                                     </LemonButton>
                                 </div>
                             ),
@@ -125,7 +122,6 @@ export const SidePanelExperimentFeatureFlag = (): JSX.Element => {
                                     }}
                                     min={0}
                                     max={100}
-                                    suffix={<span>%</span>}
                                 />
                             ),
                         },
@@ -143,6 +139,7 @@ export const SidePanelExperimentFeatureFlag = (): JSX.Element => {
                 id={`${experiment.feature_flag?.id}`}
                 filters={featureFlag?.filters ?? []}
                 onChange={setFeatureFlagFilters}
+                nonEmptyFeatureFlagVariants={nonEmptyVariants}
             />
             <LemonDivider />
             <div>

diff --git a/frontend/src/scenes/feature-flags/FeatureFlagReleaseConditions.tsx b/frontend/src/scenes/feature-flags/FeatureFlagReleaseConditions.tsx
@@ -40,6 +40,7 @@ export function FeatureFlagReleaseConditions({
     filters,
     onChange,
     hideMatchOptions,
+    nonEmptyFeatureFlagVariants,
 }: FeatureFlagReleaseConditionsLogicProps & {
     hideMatchOptions?: boolean
     isSuper?: boolean
@@ -78,6 +79,8 @@ export function FeatureFlagReleaseConditions({
     const { cohortsById } = useValues(cohortsModel)
     const { groupsAccessStatus } = useValues(groupsAccessLogic)
 
+    const featureFlagVariants = nonEmptyFeatureFlagVariants || nonEmptyVariants
+
     const filterGroups: FeatureFlagGroupType[] = (isSuper ? filters?.super_groups : filters?.groups) || []
     // :KLUDGE: Match by select only allows Select.Option as children, so render groups option directly rather than as a child
     const matchByGroupsIntroductionOption = GroupsIntroductionOption()
@@ -335,7 +338,7 @@ export function FeatureFlagReleaseConditions({
                             </div>
                         </div>
                     )}
-                    {nonEmptyVariants.length > 0 && (
+                    {featureFlagVariants.length > 0 && (
                         <>
                             <LemonDivider className="my-3" />
                             {readOnly ? (
@@ -360,7 +363,7 @@ export function FeatureFlagReleaseConditions({
                                             allowClear={true}
                                             value={group.variant}
                                             onChange={(value) => updateConditionSet(index, undefined, undefined, value)}
-                                            options={nonEmptyVariants.map((variant) => ({
+                                            options={featureFlagVariants.map((variant) => ({
                                                 label: variant.key,
                                                 value: variant.key,
                                             }))}

diff --git a/frontend/src/scenes/feature-flags/FeatureFlagReleaseConditionsLogic.ts b/frontend/src/scenes/feature-flags/FeatureFlagReleaseConditionsLogic.ts
@@ -11,6 +11,7 @@ import {
     FeatureFlagFilters,
     FeatureFlagGroupType,
     GroupTypeIndex,
+    MultivariateFlagVariant,
     PropertyFilterType,
     UserBlastRadiusType,
 } from '~/types'
@@ -24,6 +25,7 @@ export interface FeatureFlagReleaseConditionsLogicProps {
     id?: string
     readOnly?: boolean
     onChange?: (filters: FeatureFlagFilters, errors: any) => void
+    nonEmptyFeatureFlagVariants?: MultivariateFlagVariant[]
 }
 
 export const featureFlagReleaseConditionsLogic = kea<featureFlagReleaseConditionsLogicType>([