fix: switched-allow-context-values-to-disabled (#6216)

Author: Zaimwa9

frontend/web/components/base/select/SearchableSelect.tsx

@@ -1,7 +1,7 @@
 import Icon from 'components/Icon'
 import React from 'react'
 export interface OptionType {
-  enabled?: boolean
+  disabled?: boolean
   label: string
   value: string
 }

frontend/web/components/segments/Rule/Rule.tsx

@@ -97,6 +97,12 @@ const Rule: React.FC<RuleProps> = ({
       } else {
         updates.value = updates.value?.toString().split(':')[0]
       }
+    } else if (
+      // If previous operator was PERCENTAGE_SPLIT and property was IDENTITY_KEY, reset property
+      condition?.operator === 'PERCENTAGE_SPLIT' &&
+      condition?.property === RuleContextValues.IDENTITY_KEY
+    ) {
+      updates.property = ''
     }
 
     updateCondition(conditionIndex, updates)

frontend/web/components/segments/Rule/components/RuleConditionRow.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import Icon from 'components/Icon'
 import Utils from 'common/utils/utils'
 import {
@@ -67,15 +67,15 @@ const RuleConditionRow: React.FC<RuleConditionRowProps> = ({
   if (rule.delete) {
     return null
   }
+
   const valuePlaceholder = operatorObj?.hideValue
     ? 'Value (N/A)'
     : operatorObj?.valuePlaceholder || 'Value'
 
   // TODO: Move this to the parent component in next iteration
-
   const ALLOWED_CONTEXT_VALUES: OptionType[] = [
     {
-      enabled: operator === 'PERCENTAGE_SPLIT',
+      disabled: operator !== 'PERCENTAGE_SPLIT',
       label: RuleContextLabels.IDENTITY_KEY,
       value: RuleContextValues.IDENTITY_KEY,
     },
@@ -87,7 +87,7 @@ const RuleConditionRow: React.FC<RuleConditionRowProps> = ({
       label: RuleContextLabels.ENVIRONMENT_NAME,
       value: RuleContextValues.ENVIRONMENT_NAME,
     },
-  ]?.filter((option) => !!option.enabled)
+  ]?.filter((option) => !option.disabled)
 
   const isValueFromContext = !!ALLOWED_CONTEXT_VALUES.find(
     (option) => option.value === rule.property,
@@ -133,9 +133,9 @@ const RuleConditionRow: React.FC<RuleConditionRowProps> = ({
           <Select
             data-test={`${dataTest}-operator-${ruleIndex}`}
             value={operator && find(operators, { value: operator })}
-            onChange={(value: { value: string }) =>
+            onChange={(value: { value: string }) => {
               setRuleProperty(ruleIndex, 'operator', value)
-            }
+            }}
             options={operators}
             style={{ width: '190px' }}
           />