refactor: split components into smaller files and keep the selected options

Author: talissoncosta

frontend/web/components/base/select/multi-select/CustomMultiValue.tsx

@@ -0,0 +1,47 @@
+import { MultiValueProps } from 'react-select/lib/components/MultiValue'
+import { MultiSelectOption } from './MultiSelect'
+
+export const CustomMultiValue = ({
+    color,
+    data,
+    removeProps,
+  }: MultiValueProps<MultiSelectOption> & { color?: string }) => {
+    return (
+      <div
+        className='d-flex align-items-center'
+        style={{
+          backgroundColor: color,
+          borderRadius: '4px',
+          color: 'white',
+          fontSize: '12px',
+          maxWidth: '150px',
+          overflow: 'hidden',
+          padding: '2px 6px',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          maxHeight: '24px'
+        }}
+      >
+        <span
+          className='mr-1'
+          style={{
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {data.label}
+        </span>
+        <span
+          onClick={() => removeProps?.onClick?.(data)}
+          style={{
+            cursor: 'pointer',
+            fontSize: '14px',
+            lineHeight: '1',
+          }}
+        >
+          ×
+        </span>
+      </div>
+    )
+  }

frontend/web/components/base/select/multi-select/CustomOption.tsx

@@ -0,0 +1,33 @@
+
+import { OptionProps } from 'react-select/lib/components/Option'
+import { MultiSelectOption } from './MultiSelect'
+
+export const CustomOption = ({
+    children,
+    color,
+    ...props
+  }: OptionProps<MultiSelectOption> & { color?: string }) => {
+    return (
+      <div
+        {...props.innerProps}
+        className={`d-flex align-items-center p-2 ${
+          props.isFocused ? 'bg-light' : ''
+        }`}
+        style={{ cursor: 'pointer' }}
+      >
+        {color && (
+          <div
+            style={{
+              backgroundColor: color,
+              borderRadius: '2px',
+              flexShrink: 0,
+              height: '12px',
+              marginRight: '8px',
+              width: '12px',
+            }}
+          />
+        )}
+        <span>{children}</span>
+      </div>
+    )
+  }

frontend/web/components/base/select/MultiSelect.tsx renamed to frontend/web/components/base/select/multi-select/MultiSelect.tsx

@@ -1,6 +1,10 @@
 import classNames from 'classnames'
-import React from 'react'
+import React, { FC } from 'react'
 import { MultiValueProps } from 'react-select/lib/components/MultiValue'
+import { OptionProps } from 'react-select/lib/components/Option'
+
+import { CustomMultiValue } from './CustomMultiValue'
+import { CustomOption } from './CustomOption'
 
 export interface MultiSelectOption {
   label: string
@@ -17,84 +21,11 @@ export interface MultiSelectProps {
   className?: string
   disabled?: boolean
   size?: 'small' | 'default' | 'large'
+  hideSelectedOptions?: boolean
+  inline?: boolean
 }
 
-const CustomMultiValue = ({
-  color,
-  data,
-  removeProps,
-}: MultiValueProps<MultiSelectOption> & { color?: string }) => {
-  return (
-    <div
-      className='d-flex align-items-center'
-      style={{
-        backgroundColor: color,
-        borderRadius: '4px',
-        color: 'white',
-        fontSize: '12px',
-        maxWidth: '150px',
-        overflow: 'hidden',
-        padding: '2px 6px',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        maxHeight: '24px'
-      }}
-    >
-      <span
-        className='mr-1'
-        style={{
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-        }}
-      >
-        {data.label}
-      </span>
-      <span
-        onClick={() => removeProps?.onClick?.(data)}
-        style={{
-          cursor: 'pointer',
-          fontSize: '14px',
-          lineHeight: '1',
-        }}
-      >
-        ×
-      </span>
-    </div>
-  )
-}
-
-const CustomOption = ({
-  children,
-  color,
-  ...props
-}: any & { color?: string }) => {
-  return (
-    <div
-      {...props.innerProps}
-      className={`d-flex align-items-center p-2 ${
-        props.isFocused ? 'bg-light' : ''
-      }`}
-      style={{ cursor: 'pointer' }}
-    >
-      {color && (
-        <div
-          style={{
-            backgroundColor: color,
-            borderRadius: '2px',
-            flexShrink: 0,
-            height: '12px',
-            marginRight: '8px',
-            width: '12px',
-          }}
-        />
-      )}
-      <span>{children}</span>
-    </div>
-  )
-}
-
-const MultiSelect: React.FC<MultiSelectProps> = ({
+export const MultiSelect: FC<MultiSelectProps> = ({
   className = '',
   colorMap,
   disabled = false,
@@ -104,6 +35,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
   placeholder = 'Select options...',
   selectedValues,
   size = 'default',
+  hideSelectedOptions = false,
 }) => {
   return (
     <div className={classNames(
@@ -113,25 +45,25 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
       {label && <label>{label}</label>}
       <Select
         isMulti
+        hideSelectedOptions={hideSelectedOptions}
         closeMenuOnSelect={false}
         placeholder={placeholder}
         isDisabled={disabled}
         size={size}
-        onChange={(selectedOptions: any) => {
+        onChange={(selectedOptions: MultiSelectOption[]) => {
           const values = selectedOptions
-            ? selectedOptions.map((opt: any) => opt.value)
+            ? selectedOptions.map((opt: MultiSelectOption) => opt.value)
             : []
           onSelectionChange(values)
         }}
         components={{
           MultiValue: (props: MultiValueProps<MultiSelectOption>) => (
             <CustomMultiValue
               {...props}
-              className={classNames(props.className, 'h-[24px]')}
               color={colorMap?.get(props.data.value) || '#5D6D7E'}
             />
           ),
-          ...(colorMap ? {Option: (props: any) => <CustomOption
+          ...(colorMap ? {Option: (props: OptionProps<MultiSelectOption>) => <CustomOption
             {...props}
             color={colorMap.get(props.data.value)}
           />} : {}),
@@ -154,15 +86,20 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
           }),
           valueContainer: (base: any) => ({
             ...base,
-            flexWrap: 'wrap',
+            flexWrap: 'nowrap',
             gap: '2px',
             paddingBottom: '6px',
             paddingTop: '6px',
+            flex: 1
+          }),
+          input: (base: any) => ({
+            ...base,
+            margin: 0,
+            paddingBottom: 0,
+            paddingTop: 0,
           }),
         }}
       />
     </div>
   )
 }
-
-export default MultiSelect

frontend/web/components/base/select/multi-select/index.ts

@@ -0,0 +1 @@
+export { MultiSelect } from './MultiSelect'

frontend/web/components/organisation-settings/usage/OrganisationUsageMetrics.container.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react'
 import { Res } from 'common/types/responses'
 import SingleSDKLabelsChart from './components/SingleSDKLabelsChart'
-import MultiSelect from 'components/base/select/MultiSelect'
+import { MultiSelect } from 'components/base/select/multi-select'
 
 export interface OrganisationUsageMetricsProps {
   data?: Res['organisationUsage']

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

@@ -16,7 +16,6 @@ import {
   splitIfValue,
   isInvalidPercentageSplit,
 } from './utils'
-import { useConditionCache } from './hooks/useConditionCache'
 
 interface RuleProps {
   index: number
@@ -42,8 +41,6 @@ const Rule: React.FC<RuleProps> = ({
 }) => {
   const { conditions: rules } = rule
 
-  const { cacheValue, getCachedValue } = useConditionCache()
-
   const updateCondition = (
     conditionIndex: number,
     updates: Partial<SegmentCondition>,
@@ -59,15 +56,7 @@ const Rule: React.FC<RuleProps> = ({
   }
 
   const setConditionProperty = (conditionIndex: number, property: string) => {
-    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 })
+    updateCondition(conditionIndex, { property })
   }
 
   const setConditionOperator = (
@@ -82,15 +71,18 @@ 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],
     }
 
+    // Clear value when changing to or from IN operator
+    const isChangingToIn = operatorValue === 'IN'
+    const isChangingFromIn = condition?.operator === 'IN'
+    if (isChangingToIn || isChangingFromIn) {
+      updates.value = ''
+    }
+
     if (newOperator?.hideValue) {
       updates.value = null
     }
@@ -118,22 +110,6 @@ 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/RuleConditionValueInput.tsx

@@ -7,7 +7,7 @@ import { getDarkMode } from 'project/darkMode'
 import EnvironmentSelectDropdown from './EnvironmentSelectDropdown'
 import TextAreaModal from './TextAreaModal'
 import { checkWhitespaceIssues } from 'components/segments/Rule/utils'
-import MultiSelect from 'components/base/select/MultiSelect'
+import { MultiSelect } from 'components/base/select/multi-select'
 import { safeParseArray } from 'components/segments/Rule/utils/arrayUtils'
 import { useGetEnvironmentsQuery } from 'common/services/useEnvironment'
 import { useConditionInputType } from 'components/segments/Rule/hooks/useConditionInputType'

frontend/web/styles/3rdParty/_react-select.scss

@@ -94,7 +94,7 @@
   }
   &__control {
     background: $input-bg;
-    min-height: $input-height;
+    height: $input-height;
     border-radius: $border-radius;
     border: 1px solid $input-border-color;
     &--is-disabled {