fix: variation percentage calculation (#3268)

Flagsmith · Jan 19, 2024 · ec272ba · ec272ba · vercel · Jan 19, 2024
1 parent ead0e31
commit ec272ba
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git a/frontend/web/components/Feature.js b/frontend/web/components/Feature.js
@@ -44,11 +44,11 @@ export default class Feature extends PureComponent {
 
     const enabledString = isEdit ? 'Enabled' : 'Enabled by default'
     const disabled = hide_from_client
-    const controlValue = Utils.calculateControl(multivariate_options)
+    const controlPercentage = Utils.calculateControl(multivariate_options)
     const valueString = identity
       ? 'User override'
       : !!multivariate_options && multivariate_options.length
-      ? `Control Value - ${controlValue}%`
+      ? `Control Value - ${controlPercentage}%`
       : `Value (optional)${' - these can be set per environment'}`
 
     const showValue = !(
@@ -103,7 +103,8 @@ export default class Feature extends PureComponent {
               <VariationOptions
                 disabled
                 select
-                controlValue={environmentFlag.feature_state_value}
+                controlValue={environmentFlag?.feature_state_value}
+                controlPercentage={controlPercentage}
                 variationOverrides={this.props.identityVariations}
                 setVariations={this.props.onChangeIdentityVariations}
                 updateVariation={() => {}}
@@ -121,7 +122,8 @@ export default class Feature extends PureComponent {
               {(!!environmentVariations || !isEdit) && (
                 <VariationOptions
                   disabled={!!identity || readOnly}
-                  controlValue={controlValue}
+                  controlValue={environmentFlag?.feature_state_value}
+                  controlPercentage={controlPercentage}
                   variationOverrides={environmentVariations}
                   updateVariation={this.props.updateVariation}
                   weightTitle={

diff --git a/frontend/web/components/SegmentOverrides.js b/frontend/web/components/SegmentOverrides.js
@@ -149,10 +149,13 @@ const SegmentOverrideInner = class Override extends React.Component {
             <Row className='gap-3'>
               <Tooltip
                 title={
-                  <label className='cols-sm-2 control-label mb-0 ml-3'><Icon name='info-outlined' /></label>
+                  <label className='cols-sm-2 control-label mb-0 ml-3'>
+                    <Icon name='info-outlined' />
+                  </label>
                 }
               >
-                Set the Feature state to On or Off for Identities in this Segment
+                Set the Feature state to On or Off for Identities in this
+                Segment
               </Tooltip>
               <Switch
                 data-test={`segment-override-toggle-${index}`}
@@ -312,6 +315,7 @@ const SegmentOverrideInner = class Override extends React.Component {
                   readOnlyValue
                   disabled={readOnly}
                   controlValue={controlValue}
+                  controlPercentage={controlPercent}
                   variationOverrides={mvOptions}
                   multivariateOptions={multivariateOptions.map((mv) => {
                     const foundMv =

diff --git a/frontend/web/components/mv/VariationOptions.js b/frontend/web/components/mv/VariationOptions.js
@@ -5,6 +5,7 @@ import InfoMessage from 'components/InfoMessage'
 import ErrorMessage from 'components/ErrorMessage'
 
 export default function VariationOptions({
+  controlPercentage,
   controlValue,
   disabled,
   multivariateOptions,
@@ -18,7 +19,7 @@ export default function VariationOptions({
   variationOverrides,
   weightTitle,
 }) {
-  const invalid = multivariateOptions.length && controlValue < 0
+  const invalid = multivariateOptions.length && controlPercentage < 0
   if (!multivariateOptions || !multivariateOptions.length) {
     return null
   }
@@ -28,7 +29,10 @@ export default function VariationOptions({
   return (
     <>
       {invalid && (
-        <ErrorMessage error='Your variation percentage splits total to over 100%' />
+        <ErrorMessage
+          className='mt-2'
+          error='Your variation percentage splits total to over 100%'
+        />
       )}
       {!preventRemove && (
         <p className='mb-4'>