fix(features): Fix multivariate weights in change requests and segment overrides

frontend/common/providers/FeatureListProvider.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import FeatureListStore from 'common/stores/feature-list-store'
 import ProjectStore from 'common/stores/project-store'
+import Utils from 'common/utils/utils'
 
 const FeatureListProvider = class extends React.Component {
   static displayName = 'FeatureListProvider'
@@ -147,7 +148,10 @@ const FeatureListProvider = class extends React.Component {
       projectFlag,
       {
         ...environmentFlag,
-        multivariate_feature_state_values: flag.multivariate_options,
+        multivariate_feature_state_values: Utils.mapMvOptionsToStateValues(
+          flag.multivariate_options,
+          environmentFlag.multivariate_feature_state_values,
+        ),
       },
       segmentOverrides,
       'SEGMENT',
@@ -216,7 +220,10 @@ const FeatureListProvider = class extends React.Component {
           newProjectFlag,
           {
             ...environmentFlag,
-            multivariate_feature_state_values: flag.multivariate_options,
+            multivariate_feature_state_values: Utils.mapMvOptionsToStateValues(
+              flag.multivariate_options,
+              environmentFlag.multivariate_feature_state_values,
+            ),
           },
           segmentOverrides,
           changeRequest,

frontend/common/stores/feature-list-store.ts

@@ -60,7 +60,10 @@ const convertSegmentOverrideToFeatureState = (
     feature_state_value: override.value,
     id: override.id,
     live_from: changeRequest?.live_from,
-    multivariate_feature_state_values: override.multivariate_options,
+    multivariate_feature_state_values: Utils.mapMvOptionsToStateValues(
+      override.multivariate_options,
+      override.multivariate_feature_state_values,
+    ),
     toRemove: override.toRemove,
   } as Partial<FeatureState>
 }
@@ -203,7 +206,6 @@ const controller = {
       store.model && store.model.features
         ? store.model.features.find((v) => v.id === flag.id)
         : flag
-
     Promise.all(
       (flag.multivariate_options || []).map((v, i) => {
         const originalMV = v.id
@@ -631,13 +633,16 @@ const controller = {
                           (v.multivariate_feature_option || v.id) ===
                           (m.multivariate_feature_option || m.id),
                       )
-                      return {
-                        ...v,
-                        percentage_allocation: matching
-                          ? typeof matching.percentage_allocation === 'number'
+                      let percentage_allocation = v.percentage_allocation
+                      if (matching) {
+                        percentage_allocation =
+                          typeof matching.percentage_allocation === 'number'
                             ? matching.percentage_allocation
                             : matching.default_percentage_allocation
-                          : v.percentage_allocation,
+                      }
+                      return {
+                        ...v,
+                        percentage_allocation,
                       }
                     },
                   )

frontend/common/utils/utils.tsx

@@ -79,11 +79,13 @@ const Utils = Object.assign({}, require('./base/_utils'), {
       const variation =
         variations &&
         variations.find((env) => env.multivariate_feature_option === v.id)
-      total += variation
-        ? variation.percentage_allocation
-        : typeof v.default_percentage_allocation === 'number'
-        ? v.default_percentage_allocation
-        : (v as any).percentage_allocation
+      if (variation) {
+        total += variation.percentage_allocation
+      } else if (typeof v.default_percentage_allocation === 'number') {
+        total += v.default_percentage_allocation
+      } else {
+        total += (v as any).percentage_allocation
+      }
       return null
     })
     return 100 - total
@@ -157,15 +159,21 @@ const Utils = Object.assign({}, require('./base/_utils'), {
   displayLimitAlert(type: string, percentage: number | undefined) {
     const envOrProject =
       type === 'segment overrides' ? 'environment' : 'project'
-    return percentage >= 100 ? (
-      <ErrorMessage
-        error={`Your ${envOrProject} reached the limit of ${type}, please contact support to discuss increasing this limit.`}
-      />
-    ) : percentage ? (
-      <WarningMessage
-        warningMessage={`Your ${envOrProject} is  using ${percentage}% of the total allowance of ${type}.`}
-      />
-    ) : null
+    if (percentage >= 100) {
+      return (
+        <ErrorMessage
+          error={`Your ${envOrProject} reached the limit of ${type}, please contact support to discuss increasing this limit.`}
+        />
+      )
+    }
+    if (percentage) {
+      return (
+        <WarningMessage
+          warningMessage={`Your ${envOrProject} is  using ${percentage}% of the total allowance of ${type}.`}
+        />
+      )
+    }
+    return null
   },
   escapeHtml(html: string) {
     const text = document.createTextNode(html)
@@ -477,11 +485,13 @@ const Utils = Object.assign({}, require('./base/_utils'), {
   },
   getPlansPermission: (feature: PaidFeature) => {
     const isOrgPermission = feature !== '2FA'
-    const plans = isOrgPermission
-      ? AccountStore.getActiveOrgPlan()
-        ? [AccountStore.getActiveOrgPlan()]
-        : null
-      : AccountStore.getPlans()
+    let plans: string[] | null
+    if (isOrgPermission) {
+      const activeOrgPlan = AccountStore.getActiveOrgPlan()
+      plans = activeOrgPlan ? [activeOrgPlan] : null
+    } else {
+      plans = AccountStore.getPlans()
+    }
 
     if (!plans || !plans.length) {
       return false
@@ -669,7 +679,44 @@ const Utils = Object.assign({}, require('./base/_utils'), {
       head.appendChild(script)
     })
   },
-
+  mapMvOptionsToStateValues(
+    mvOptions: (MultivariateOption | MultivariateFeatureStateValue)[],
+    existingMvFeatureStateValues: MultivariateFeatureStateValue[],
+  ): MultivariateFeatureStateValue[] {
+    // Handle both MultivariateOption (from project flag) and MultivariateFeatureStateValue (from segment overrides)
+    // Filter out variations without IDs (new variations that haven't been saved yet)
+    // These cannot be referenced in a change request until saved to the project
+    return mvOptions
+      ?.filter((mvOption) => {
+        // Check for both 'id' (MultivariateOption) and 'multivariate_feature_option' (MultivariateFeatureStateValue)
+        const optionId =
+          (mvOption as MultivariateOption).id ??
+          (mvOption as MultivariateFeatureStateValue)
+            .multivariate_feature_option
+        return optionId !== undefined
+      })
+      .map((mvOption) => {
+        // Get the option ID from either property
+        const optionId =
+          (mvOption as MultivariateOption).id ??
+          (mvOption as MultivariateFeatureStateValue)
+            .multivariate_feature_option
+        const existing = existingMvFeatureStateValues?.find(
+          (e) => e.multivariate_feature_option === optionId,
+        )
+        // Get the percentage allocation from the current option or existing or default
+        const currentAllocation = (mvOption as MultivariateFeatureStateValue)
+          .percentage_allocation
+        return {
+          id: optionId,
+          multivariate_feature_option: optionId,
+          percentage_allocation:
+            currentAllocation ??
+            existing?.percentage_allocation ??
+            (mvOption as MultivariateOption).default_percentage_allocation,
+        }
+      })
+  },
   numberWithCommas(x: number) {
     if (typeof x !== 'number') return ''
     return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')

frontend/e2e/init.cafe.js

@@ -10,6 +10,7 @@ import projectTest from './tests/project-test'
 import { testSegment1, testSegment2, testSegment3 } from './tests/segment-test'
 import initialiseTests from './tests/initialise-tests'
 import flagTests from './tests/flag-tests'
+import changeRequestTest from './tests/change-request-test'
 import versioningTests from './tests/versioning-tests'
 import organisationPermissionTest from './tests/organisation-permission-test'
 import projectPermissionTest from './tests/project-permission-test'
@@ -105,6 +106,11 @@ test('Segment-part-3', testSegment3).meta({ autoLogout: true, category: 'oss' })
 
 test('Flag', flagTests).meta({ autoLogout: true, category: 'oss' })
 
+test('Change-Request', changeRequestTest).meta({
+  autoLogout: true,
+  category: 'enterprise',
+})
+
 test('Signup', initialiseTests).meta({ autoLogout: true, category: 'oss' })
 
 test('Invite', inviteTest).meta({ category: 'oss' })