fix(experiments): show variant overrides in the sidebar view

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>

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,
                                             }))}

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>([