From fb68213ca10f164371a680e5b56fa7a124bcf248 Mon Sep 17 00:00:00 2001
From: Dylan Martin <dylan@posthog.com>
Date: Thu, 24 Oct 2024 18:11:49 +0200
Subject: [PATCH] fix(experiments): show variant overrides in the sidebar view
 (#25777)

---
 .../sidepanel/panels/SidePanelExperimentFeatureFlag.tsx    | 4 +++-
 .../scenes/feature-flags/FeatureFlagReleaseConditions.tsx  | 7 +++++--
 .../feature-flags/FeatureFlagReleaseConditionsLogic.ts     | 2 ++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelExperimentFeatureFlag.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelExperimentFeatureFlag.tsx
index 374df90a2371e..5002f2bd78929 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelExperimentFeatureFlag.tsx
+++ b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelExperimentFeatureFlag.tsx
@@ -32,7 +32,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)
 
@@ -143,6 +144,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
index ccd0986e0a2af..d7d410225e514 100644
--- 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
index 3c04cb826266c..88ae79a8fa1f8 100644
--- 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>([