fix: show whitespace warnings for IN operator comma-separated values (#6203)

Author: talissoncosta

frontend/web/components/modals/CreateSegment.tsx

@@ -498,7 +498,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
               </Row>
             }
           >
-            <div className='my-4 col-lg-8'>
+            <div className='my-4 col-lg-8 mx-auto'>
               <CreateSegmentRulesTabForm
                 is4Eyes={is4Eyes}
                 onCreateChangeRequest={onCreateChangeRequest}
@@ -526,7 +526,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
             </div>
           </TabItem>
           <TabItem tabLabel='Features'>
-            <div className='my-4 col-lg-8'>
+            <div className='my-4 col-lg-8 mx-auto'>
               <AssociatedSegmentOverrides
                 onUnsavedChange={() => {
                   setValueChanged(true)
@@ -539,7 +539,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
             </div>
           </TabItem>
           <TabItem tabLabel='Users'>
-            <div className='my-4 col-lg-8'>
+            <div className='my-4 col-lg-8 mx-auto'>
               <CreateSegmentUsersTabContent
                 projectId={projectId}
                 environmentId={environmentId}
@@ -566,7 +566,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
                 </Row>
               }
             >
-              <div className='my-4 col-lg-8'>{MetadataTab}</div>
+              <div className='my-4 col-lg-8 mx-auto'>{MetadataTab}</div>
             </TabItem>
           )}
         </Tabs>

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

@@ -149,6 +149,7 @@ const RuleConditionRow: React.FC<RuleConditionRowProps> = ({
           style={{ width: '135px' }}
           projectId={projectId}
           showEnvironmentDropdown={showEnvironmentDropdown}
+          operator={operator}
           onChange={(value: string) => {
             setRuleProperty(ruleIndex, 'value', {
               value:

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

@@ -1,13 +1,12 @@
 import React from 'react'
 import Input from 'components/base/forms/Input'
 import Icon from 'components/Icon'
-import InputGroup from 'components/base/forms/InputGroup'
-import Button from 'components/base/forms/Button'
 import Utils from 'common/utils/utils'
 
 import { getDarkMode } from 'project/darkMode'
-import ModalHR from 'components/modals/ModalHR'
 import EnvironmentSelectDropdown from './EnvironmentSelectDropdown'
+import TextAreaModal from './TextAreaModal'
+import { checkWhitespaceIssues } from '../utils'
 
 type RuleConditionValueInputProps = {
   'data-test'?: string
@@ -20,108 +19,25 @@ type RuleConditionValueInputProps = {
   isValid?: boolean
   projectId?: number
   showEnvironmentDropdown?: boolean
-}
-
-const TextAreaModal = ({
-  disabled,
-  isValid,
-  onChange,
-  placeholder,
-  readOnly,
-  style,
-  value,
-}: RuleConditionValueInputProps) => {
-  const [textAreaValue, setTextAreaValue] = React.useState(value)
-
-  return (
-    <div>
-      <div className='modal-body'>
-        <InputGroup
-          id='rule-value-textarea'
-          data-test='rule-value-textarea'
-          value={textAreaValue}
-          inputProps={{
-            style: style,
-          }}
-          isValid={isValid}
-          onChange={(e: InputEvent) => {
-            const value = Utils.safeParseEventValue(e)
-            setTextAreaValue(value.replace(/\n/g, ''))
-          }}
-          type='text'
-          className='w-100'
-          readOnly={readOnly}
-          placeholder={placeholder}
-          disabled={disabled}
-          textarea
-        />
-      </div>
-      <ModalHR />
-      <div className='modal-footer'>
-        <Button
-          className='mr-2'
-          theme='secondary'
-          id='rule-value-textarea-cancel'
-          data-tests='rule-value-textarea-cancel'
-          onClick={closeModal2}
-        >
-          Cancel
-        </Button>
-        <Button
-          type='button'
-          id='rule-value-textarea-save'
-          data-tests='rule-value-textarea-save'
-          onClick={() => {
-            const event = new InputEvent('input', { bubbles: true })
-            Object.defineProperty(event, 'target', {
-              value: { value: textAreaValue },
-              writable: false,
-            })
-            const value = Utils.getTypedValue(Utils.safeParseEventValue(event))
-            onChange?.(value)
-            closeModal2()
-          }}
-        >
-          Apply
-        </Button>
-      </div>
-    </div>
-  )
+  operator?: string
 }
 
 const RuleConditionValueInput: React.FC<RuleConditionValueInputProps> = ({
   isValid,
   onChange,
+  operator,
   projectId,
   showEnvironmentDropdown,
   value,
   ...props
 }) => {
-  const hasLeadingWhitespace = typeof value === 'string' && /^\s/.test(value)
-  const hasTrailingWhitespace = typeof value === 'string' && /\s$/.test(value)
-  const isOnlyWhitespace =
-    typeof value === 'string' && value.length >= 1 && value.trim() === ''
-  const hasBothLeadingAndTrailingWhitespace =
-    hasLeadingWhitespace && hasTrailingWhitespace
-  const hasWarning =
-    hasLeadingWhitespace ||
-    hasTrailingWhitespace ||
-    hasBothLeadingAndTrailingWhitespace ||
-    isOnlyWhitespace
+  const whitespaceCheck = checkWhitespaceIssues(value, operator)
+  const hasWarning = !!whitespaceCheck
   const isLongText = String(value).length >= 10
 
   const validate = () => {
-    if (isOnlyWhitespace) {
-      return 'This value is only whitespaces'
-    }
-    if (hasBothLeadingAndTrailingWhitespace) {
-      return 'This value starts and ends with whitespaces'
-    }
-    if (hasLeadingWhitespace) {
-      return 'This value starts with whitespaces'
-    }
-    if (hasTrailingWhitespace) {
-      return 'This value ends with whitespaces'
+    if (whitespaceCheck?.message) {
+      return whitespaceCheck.message
     }
     if (isLongText) {
       return 'Click to edit text in a larger area'
@@ -146,6 +62,8 @@ const RuleConditionValueInput: React.FC<RuleConditionValueInputProps> = ({
           <Input
             type='text'
             data-test={props['data-test']}
+            name='rule-condition-value-input'
+            aria-label='Rule condition value input'
             value={value}
             inputClassName={
               showIcon ? `pr-5 ${hasWarning ? 'border-warning' : ''}` : ''
@@ -161,19 +79,16 @@ const RuleConditionValueInput: React.FC<RuleConditionValueInputProps> = ({
               <Tooltip
                 title={
                   <div
-                    className={`flex ${
+                    className={`rule-value-icon flex ${
                       isDarkMode ? 'bg-white' : 'bg-black'
-                    } bg-opacity-10 rounded-2 p-1 ${
-                      hasWarning ? '' : 'cursor-pointer'
-                    }`}
+                    } bg-opacity-10 rounded-2 p-1 cursor-pointer`}
                     onClick={() => {
-                      if (hasWarning) return
                       openModal2(
                         'Edit Value',
-                        <TextAreaModal
-                          value={value}
-                          onChange={onChange}
-                          isValid={isValid}
+                        <TextAreaModal 
+                          value={value} 
+                          onChange={onChange} 
+                          operator={operator}
                         />,
                       )
                     }}

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

@@ -0,0 +1,89 @@
+import React, { useState, FC } from 'react'
+import InputGroup from 'components/base/forms/InputGroup'
+import Button from 'components/base/forms/Button'
+import Icon from 'components/Icon'
+import Utils from 'common/utils/utils'
+import ModalHR from 'components/modals/ModalHR'
+import { checkWhitespaceIssues } from '../utils'
+
+type TextAreaModalProps = {
+  value: string | number | boolean
+  onChange?: (value: string) => void
+  operator?: string
+}
+
+const TextAreaModal: FC<TextAreaModalProps> = ({ onChange, value, operator }) => {
+  const [textAreaValue, setTextAreaValue] = useState(value)
+  const whitespaceCheck = checkWhitespaceIssues(textAreaValue, operator)
+  const hasWarning = !!whitespaceCheck
+
+  return (
+    <div>
+      <div className='modal-body d-flex flex-column gap-1'>
+        <InputGroup
+          id='rule-value-textarea'
+          data-test='rule-value-textarea'
+          value={textAreaValue}
+          onChange={(e: InputEvent) => {
+            const value = Utils.safeParseEventValue(e)
+            setTextAreaValue(value.replace(/\n/g, ''))
+          }}
+          noMargin
+          inputProps={{
+            className: hasWarning ? 'border-warning' : '',
+          }}
+          type='text'
+          className='w-100'
+          textarea
+        />
+        <div
+          style={{
+            minHeight: '20px',
+            transition: 'opacity 0.25s ease-in-out',
+            opacity: hasWarning ? 1 : 0,
+          }}
+        >
+          {hasWarning && (
+            <div className='text-warning d-flex align-items-start gap-2'>
+              <span className='d-flex' style={{ alignSelf: 'center' }}>
+                <Icon name='warning' width={16} height={16} />
+              </span>
+              <span>{whitespaceCheck?.message}</span>
+            </div>
+          )}
+        </div>
+      </div>
+      <ModalHR />
+      <div className='modal-footer'>
+        <Button
+          className='mr-2'
+          theme='secondary'
+          id='rule-value-textarea-cancel'
+          data-tests='rule-value-textarea-cancel'
+          onClick={closeModal2}
+        >
+          Cancel
+        </Button>
+        <Button
+          type='button'
+          id='rule-value-textarea-save'
+          data-tests='rule-value-textarea-save'
+          onClick={() => {
+            const event = new InputEvent('input', { bubbles: true })
+            Object.defineProperty(event, 'target', {
+              value: { value: textAreaValue },
+              writable: false,
+            })
+            const value = Utils.getTypedValue(Utils.safeParseEventValue(event))
+            onChange?.(value)
+            closeModal2()
+          }}
+        >
+          Apply
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default TextAreaModal

frontend/web/components/segments/Rule/utils/index.ts

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

frontend/web/components/segments/Rule/utils/whitespaceValidation.ts

@@ -0,0 +1,84 @@
+/**
+ * Checks for whitespace issues in rule condition values, particularly for IN operator
+ * @param value - The value to check for whitespace issues
+ * @param operator - The operator being used (e.g., 'IN')
+ * @returns Object with warning message if issues found, null otherwise
+ */
+export const checkWhitespaceIssues = (
+  value: string | number | boolean,
+  operator?: string,
+): { message: string } | null => {
+  if (operator !== 'IN') return null
+  if (typeof value !== 'string') return null
+
+  const LEADING_WHITESPACE = /^\s/
+  const TRAILING_WHITESPACE = /\s$/
+
+  if (value.length >= 1 && value.trim() === '') {
+    return { message: 'This value is only whitespaces' }
+  }
+
+  const items = value.split(',')
+
+  if (items.length > 1) {
+    const counts = items.reduce(
+      (acc, item) => {
+        const hasLeading = LEADING_WHITESPACE.test(item)
+        const hasTrailing = TRAILING_WHITESPACE.test(item)
+
+        if (hasLeading && hasTrailing) acc.both++
+        else if (hasLeading) acc.leading++
+        else if (hasTrailing) acc.trailing++
+
+        return acc
+      },
+      { both: 0, leading: 0, trailing: 0 },
+    )
+
+    const totalIssues = counts.both + counts.leading + counts.trailing
+    const hasMultipleIssues =
+      [counts.both > 0, counts.leading > 0, counts.trailing > 0].filter(Boolean)
+        .length > 1
+
+    if (totalIssues > 0) {
+      if (hasMultipleIssues) {
+        return {
+          message: `${totalIssues} item(s) have whitespace issues`,
+        }
+      }
+
+      if (counts.both > 0) {
+        return {
+          message: `${counts.both} item(s) have leading and trailing whitespaces`,
+        }
+      }
+      if (counts.leading > 0) {
+        return {
+          message: `${counts.leading} item(s) have leading whitespaces`,
+        }
+      }
+      if (counts.trailing > 0) {
+        return {
+          message: `${counts.trailing} item(s) have trailing whitespaces`,
+        }
+      }
+    }
+  }
+
+  const hasLeading = LEADING_WHITESPACE.test(value)
+  const hasTrailing = TRAILING_WHITESPACE.test(value)
+
+  if (hasLeading && hasTrailing) {
+    return {
+      message: 'This value starts and ends with whitespaces',
+    }
+  }
+  if (hasLeading) {
+    return { message: 'This value starts with whitespaces' }
+  }
+  if (hasTrailing) {
+    return { message: 'This value ends with whitespaces' }
+  }
+
+  return null
+}