refactor: extract logic and clean up

Author: talissoncosta

frontend/web/components/modals/AssociatedSegmentOverrides.js

@@ -157,6 +157,7 @@ class TheComponent extends Component {
               />
               <div>
                 <InputGroup
+                  className="col-4"
                   component={
                     <EnvironmentSelect
                       projectId={this.props.projectId}

frontend/web/components/modals/CreateSegmentRulesTabForm.tsx

@@ -132,28 +132,26 @@ const CreateSegmentRulesTabForm: React.FC<CreateSegmentRulesTabFormProps> = ({
         </div>
       )}
       <div className='d-flex flex-md-row flex-sm-column gap-2'> 
-        <div className='col-md-6'>
+        <div className='d-flex flex-column col-md-6'>
           <label htmlFor='segmentID'>Name*</label>
-          <Flex>
-            <Input
-              data-test='segmentID'
-              name='id'
-              id='segmentID'
-              maxLength={SEGMENT_ID_MAXLENGTH}
-              value={name}
-              onChange={(e: InputEvent) => {
-                setValueChanged(true)
-                setName(
-                  Format.enumeration
-                    .set(Utils.safeParseEventValue(e))
-                    .toLowerCase(),
-                )
-              }}
-              isValid={name && name.length}
-              type='text'
-              placeholder='E.g. power_users'
-            />
-          </Flex>
+          <Input
+            data-test='segmentID'
+            name='id'
+            id='segmentID'
+            maxLength={SEGMENT_ID_MAXLENGTH}
+            value={name}
+            onChange={(e: InputEvent) => {
+              setValueChanged(true)
+              setName(
+                Format.enumeration
+                  .set(Utils.safeParseEventValue(e))
+                  .toLowerCase(),
+              )
+            }}
+            isValid={name && name.length}
+            type='text'
+            placeholder='E.g. power_users'
+          />
         </div>
         {!condensed && (
           <InputGroup

frontend/web/components/modals/CreateSegmentUsersTabContent.tsx

@@ -98,6 +98,7 @@ const CreateSegmentUsersTabContent: React.FC<
         <FormGroup>
           <InputGroup
             title='Environment'
+            className="col-4"
             component={
               <EnvironmentSelect
                 projectId={`${projectId}`}

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

@@ -16,6 +16,7 @@ import {
   splitIfValue,
   isInvalidPercentageSplit,
 } from './utils'
+import { useConditionCache } from './hooks/useConditionCache'
 
 interface RuleProps {
   index: number
@@ -41,6 +42,8 @@ const Rule: React.FC<RuleProps> = ({
 }) => {
   const { conditions: rules } = rule
 
+  const { cacheValue, getCachedValue } = useConditionCache()
+
   const updateCondition = (
     conditionIndex: number,
     updates: Partial<SegmentCondition>,
@@ -56,7 +59,15 @@ const Rule: React.FC<RuleProps> = ({
   }
 
   const setConditionProperty = (conditionIndex: number, property: string) => {
-    updateCondition(conditionIndex, { property })
+    const condition = rule.conditions[conditionIndex]
+
+    if (condition.property) {
+      cacheValue(conditionIndex, condition.operator, condition.property, condition.value)
+    }
+
+    const cachedValue = getCachedValue(conditionIndex, condition.operator, property)
+
+    updateCondition(conditionIndex, { property, value: cachedValue })
   }
 
   const setConditionOperator = (
@@ -71,6 +82,10 @@ const Rule: React.FC<RuleProps> = ({
     )
     const newOperator = operators.find((op) => op.value === operatorValue)
 
+    if (condition.operator && condition.property) {
+      cacheValue(conditionIndex, condition.operator, condition.property, condition.value)
+    }
+
     // Split the append part of the operator as not handled by backend
     const updates: Partial<SegmentCondition> = {
       operator: operatorValue?.split(':')[0],
@@ -103,6 +118,22 @@ const Rule: React.FC<RuleProps> = ({
       }
     }
 
+    const finalProperty = updates.property !== undefined ? updates.property : condition.property
+    const finalOperator = operatorValue?.split(':')[0]
+
+    if (finalProperty && !newOperator?.hideValue && operatorValue !== 'PERCENTAGE_SPLIT') {
+      const cachedValue = getCachedValue(conditionIndex, finalOperator, finalProperty)
+
+      if (cachedValue !== '') {
+        // Use cached value if one exists (restore previous input)
+        updates.value = cachedValue
+      } else if (!updates.value) {
+        // No cache and no value set by other logic - clear the input
+        updates.value = ''
+      }
+      // Otherwise: preserve value set by append logic or existing value
+    }
+
     updateCondition(conditionIndex, updates)
   }
 

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react'
+import React from 'react'
 import Icon from 'components/Icon'
 import Utils from 'common/utils/utils'
 import {
@@ -13,8 +13,6 @@ import RuleConditionPropertySelect from './RuleConditionPropertySelect'
 import RuleConditionValueInput from './RuleConditionValueInput'
 import { RuleContextValues } from 'common/types/rules.types'
 import { useRuleOperator, useRuleContext } from 'components/segments/Rule/hooks'
-import MultiSelect from 'components/base/select/MultiSelect'
-import { useGetEnvironmentsQuery } from 'common/services/useEnvironment'
 
 interface RuleConditionRowProps {
   rule: SegmentCondition
@@ -49,25 +47,20 @@ const RuleConditionRow: React.FC<RuleConditionRowProps> = ({
   setRuleProperty,
   showDescription,
 }) => {
-  const [selectedEnvironments, setSelectedEnvironments] = useState<string[]>([])
   const lastIndex = rules.reduce((acc, v, i) => {
     if (!v.delete) {
       return i
     }
     return acc
   }, 0)
-  const { data } = useGetEnvironmentsQuery({ projectId: projectId?.toString() })
-  const environments = data?.results
-
-  const environmentOptions = useMemo(() => environments ? environments?.map(({ name }) => ({ label: name, value: name })) : [],[environments])
 
   const isLastRule = ruleIndex === lastIndex
   const hasOr = ruleIndex > 0
 
   const { displayValue, operator, operatorObj, valuePlaceholder } =
     useRuleOperator(rule, operators)
 
-  const { allowedContextValues, isValueFromContext, showEnvironmentDropdown } =
+  const { allowedContextValues, isValueFromContext } =
     useRuleContext(operator, rule.property)
 
   if (rule.delete) {
@@ -79,9 +72,6 @@ const RuleConditionRow: React.FC<RuleConditionRowProps> = ({
     operator === 'PERCENTAGE_SPLIT' &&
     rule.property === RuleContextValues.IDENTITY_KEY
 
-
-  console.log('showEnvironmentDropdown', showEnvironmentDropdown)
-  console.log('rule', rule)
   return (
     <div className='rule__row reveal' key={ruleIndex}>
       {hasOr && (
@@ -124,23 +114,15 @@ const RuleConditionRow: React.FC<RuleConditionRowProps> = ({
               className="col-10 col-md-3"
             />
           )}
-          {operator === 'IN' && rule.property === RuleContextValues.ENVIRONMENT_NAME ? (
-            <MultiSelect
-              selectedValues={selectedEnvironments}
-              onSelectionChange={(selectedValues: string[]) => setSelectedEnvironments(selectedValues)}
-              options={environmentOptions}
-              className='col-10 col-md-4'
-            />
-          ) : (
           <RuleConditionValueInput
             readOnly={readOnly}
             data-test={`${dataTest}-value-${ruleIndex}`}
             value={displayValue || ''}
             placeholder={valuePlaceholder}
             disabled={operatorObj && operatorObj.hideValue}
             projectId={projectId}
-            showEnvironmentDropdown={showEnvironmentDropdown}
             operator={operator}
+            property={rule.property}
             onChange={(value: string) => {
               setRuleProperty(ruleIndex, 'value', {
                 value:
@@ -152,7 +134,6 @@ const RuleConditionRow: React.FC<RuleConditionRowProps> = ({
             isValid={Utils.validateRule(rule) && !ruleErrors?.value}
             className='col-10 col-md-4'
           />
-          )}
         </div>
         <div className='d-flex flex-sm-column flex-md-row gap-2'>
           {isLastRule && !readOnly ? (