feat: Improves segment rule value validation and feedback

frontend/global.d.ts

@@ -38,6 +38,7 @@ declare global {
   const DYNATRACE_URL: string | undefined
   const dtrum: undefined | { identifyUser: (id: string) => void }
   const closeModal: () => void
+  const closeModal2: () => void
   const toast: (message: string) => void
   const Tooltip: FC<TooltipProps>
 }

frontend/web/components/Icon.tsx

@@ -24,6 +24,7 @@ export type IconName =
   | 'email'
   | 'eye'
   | 'eye-off'
+  | 'expand'
   | 'file-text'
   | 'flash'
   | 'github'
@@ -1367,6 +1368,22 @@ const Icon: FC<IconType> = ({ fill, fill2, height, name, width, ...rest }) => {
         </svg>
       )
     }
+    case 'expand': {
+      return (
+        <svg
+          viewBox='0 0 16 16'
+          height={height || '16'}
+          width={width || '16'}
+          fill={fill || '#000000'}
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          <path
+            fillRule='evenodd'
+            d='M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707'
+          />
+        </svg>
+      )
+    }
     default:
       return null
   }

frontend/web/components/Tooltip.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactElement, ReactNode, useRef } from 'react'
+import React, { FC, ReactNode } from 'react'
 import ReactTooltip, { TooltipProps as _TooltipProps } from 'react-tooltip'
 import Utils from 'common/utils/utils'
 import classNames from 'classnames'
@@ -11,10 +11,14 @@ export type TooltipProps = {
   plainText?: boolean
   titleClassName?: string
   tooltipClassName?: string
+  effect?: _TooltipProps['effect']
+  afterShow?: _TooltipProps['afterShow']
 }
 
 const Tooltip: FC<TooltipProps> = ({
+  afterShow,
   children,
+  effect,
   place,
   plainText,
   title,
@@ -39,6 +43,8 @@ const Tooltip: FC<TooltipProps> = ({
           className={classNames('rounded', tooltipClassName)}
           id={id}
           place={place || 'top'}
+          effect={effect}
+          afterShow={afterShow}
         >
           {plainText ? (
             `${children}`

frontend/web/components/modals/Rule.tsx

@@ -7,6 +7,7 @@ import { Operator, SegmentCondition, SegmentRule } from 'common/types/responses'
 import Input from 'components/base/forms/Input'
 import find from 'lodash/find'
 import Button from 'components/base/forms/Button'
+import RuleInputValue from './RuleInputValue'
 const splitIfValue = (v: string | null | number, append: string) =>
   append && typeof v === 'string' ? v.split(append) : [v === null ? '' : v]
 
@@ -100,7 +101,7 @@ export default class Rule extends PureComponent<{
               style={{ width: '190px' }}
             />
           )}
-          <Input
+          <RuleInputValue
             readOnly={this.props.readOnly}
             data-test={`${this.props['data-test']}-value-${i}`}
             value={value || ''}

frontend/web/components/modals/RuleInputValue.tsx

@@ -0,0 +1,178 @@
+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 ModalHR from './ModalHR'
+
+type RuleInputValueProps = {
+  'data-test'?: string
+  value: string | number
+  style?: React.CSSProperties
+  placeholder?: string
+  onChange?: (e: InputEvent) => void
+  disabled?: boolean
+  readOnly?: boolean
+  isValid?: boolean
+}
+
+const TextAreaModal = ({
+  disabled,
+  isValid,
+  onChange,
+  placeholder,
+  readOnly,
+  style,
+  value,
+}: RuleInputValueProps) => {
+  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,
+            })
+            onChange?.(event)
+            closeModal2()
+          }}
+        >
+          Apply
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+const RuleInputValue = (props: RuleInputValueProps) => {
+  const value = props.value
+  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 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 (isLongText) {
+      return 'Click to edit text in a larger area'
+    }
+    return ''
+  }
+
+  const showIcon = hasWarning || isLongText
+  const isDarkMode = Utils.getFlagsmithHasFeature('dark_mode')
+
+  return (
+    <div className='relative'>
+      <Input
+        type='text'
+        {...props}
+        inputClassName={
+          showIcon ? `pr-5 ${hasWarning ? 'border-warning' : ''}` : ''
+        }
+      />
+      {showIcon && (
+        <div style={{ position: 'absolute', right: 5, top: 9 }}>
+          <Tooltip
+            title={
+              <div
+                className={`flex ${
+                  isDarkMode ? 'bg-white' : 'bg-black'
+                } bg-opacity-10 rounded-2 p-1 ${
+                  hasWarning ? '' : 'cursor-pointer'
+                }`}
+                onClick={() => {
+                  if (hasWarning) return
+                  openModal2(
+                    'Edit Value',
+                    <TextAreaModal
+                      value={value}
+                      onChange={props.onChange}
+                      isValid={props.isValid}
+                    />,
+                  )
+                }}
+              >
+                <Icon
+                  name={hasWarning ? 'warning' : 'expand'}
+                  fill={
+                    hasWarning
+                      ? undefined
+                      : `${isDarkMode ? '#fff' : '#1A2634'}`
+                  }
+                  width={18}
+                  height={18}
+                />
+              </div>
+            }
+            place='top'
+            effect='solid'
+          >
+            {validate()}
+          </Tooltip>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default RuleInputValue