fix: extracted-mv-mapping-into-utils

Author: Zaimwa9

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,19 +148,9 @@ const FeatureListProvider = class extends React.Component {
       projectFlag,
       {
         ...environmentFlag,
-        multivariate_feature_state_values: flag.multivariate_options?.map(
-          (v) => {
-            const existing =
-              environmentFlag.multivariate_feature_state_values?.find(
-                (e) => e.multivariate_feature_option === v.id,
-              )
-            return {
-              multivariate_feature_option: v.id,
-              percentage_allocation:
-                existing?.percentage_allocation ??
-                v.default_percentage_allocation,
-            }
-          },
+        multivariate_feature_state_values: Utils.mapMvOptionsToStateValues(
+          flag.multivariate_options,
+          environmentFlag.multivariate_feature_state_values,
         ),
       },
       segmentOverrides,
@@ -229,19 +220,9 @@ const FeatureListProvider = class extends React.Component {
           newProjectFlag,
           {
             ...environmentFlag,
-            multivariate_feature_state_values: flag.multivariate_options?.map(
-              (v) => {
-                const existing =
-                  environmentFlag.multivariate_feature_state_values?.find(
-                    (e) => e.multivariate_feature_option === v.id,
-                  )
-                return {
-                  multivariate_feature_option: v.id,
-                  percentage_allocation:
-                    existing?.percentage_allocation ??
-                    v.default_percentage_allocation,
-                }
-              },
+            multivariate_feature_state_values: Utils.mapMvOptionsToStateValues(
+              flag.multivariate_options,
+              environmentFlag.multivariate_feature_state_values,
             ),
           },
           segmentOverrides,

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

@@ -60,11 +60,9 @@ const convertSegmentOverrideToFeatureState = (
     feature_state_value: override.value,
     id: override.id,
     live_from: changeRequest?.live_from,
-    multivariate_feature_state_values: override.multivariate_options?.map(
-      (v) => ({
-        multivariate_feature_option: v.id,
-        percentage_allocation: v.default_percentage_allocation,
-      }),
+    multivariate_feature_state_values: Utils.mapMvOptionsToStateValues(
+      override.multivariate_options,
+      override.multivariate_feature_state_values,
     ),
     toRemove: override.toRemove,
   } as Partial<FeatureState>

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,23 @@ const Utils = Object.assign({}, require('./base/_utils'), {
       head.appendChild(script)
     })
   },
-
+  mapMvOptionsToStateValues(
+    mvOptions: MultivariateOption[],
+    existingMvFeatureStateValues: MultivariateFeatureStateValue[],
+  ): MultivariateFeatureStateValue[] {
+    return mvOptions?.map((mvOption) => {
+      const existing = existingMvFeatureStateValues?.find(
+        (e) => e.multivariate_feature_option === mvOption.id,
+      )
+      return {
+        id: mvOption.id,
+        multivariate_feature_option: mvOption.id,
+        percentage_allocation:
+          existing?.percentage_allocation ??
+          mvOption.default_percentage_allocation,
+      }
+    })
+  },
   numberWithCommas(x: number) {
     if (typeof x !== 'number') return ''
     return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')