fix(SubstitutionRow): Add feedback for invalid substitution patterns.

Author: binh-dam-ibigroup

lib/manager/components/transform/NormalizeField.js

@@ -14,7 +14,7 @@ import {
 import Select from 'react-select'
 
 import GtfsFieldSelector from '../GtfsFieldSelector'
-import SubstitutionRow, { isSubstitutionInvalid } from './SubstitutionRow'
+import SubstitutionRow, { isSubstitutionBlank, isSubstitutionInvalid } from './SubstitutionRow'
 
 import type {
   NormalizeFieldFields,
@@ -39,6 +39,12 @@ export default class NormalizeField extends Component<TransformProps<NormalizeFi
     this._updateErrors()
   }
 
+  componentDidUpdate (prevProps: TransformProps<NormalizeFieldFields>) {
+    if (prevProps.transformation !== this.props.transformation) {
+      this._updateErrors()
+    }
+  }
+
   _onChangeFieldToNormalize = (fieldOption: ReactSelectOption) => {
     this._updateTransformation({fieldName: fieldOption.value})
   }
@@ -70,17 +76,23 @@ export default class NormalizeField extends Component<TransformProps<NormalizeFi
   _getValidationErrors (fields: NormalizeFieldFields): Array<string> {
     const issues = []
     const { fieldName } = fields
+    const { substitutions } = this.props.transformation
 
     // fieldName must be defined.
     if (!fieldName || fieldName.length === 0) {
       issues.push('Field to normalize must be defined.')
     }
 
     // The pattern for substitutions must not be null or empty.
-    if (this.props.transformation.substitutions.filter(isSubstitutionInvalid).length > 0) {
+    if (substitutions.filter(isSubstitutionBlank).length > 0) {
       issues.push('Substitution patterns must be defined.')
     }
 
+    // The pattern for substitutions must be valid.
+    if (substitutions.filter(isSubstitutionInvalid).length > 0) {
+      issues.push('Some substitution patterns are invalid.')
+    }
+
     return issues
   }
 
@@ -233,6 +245,7 @@ export default class NormalizeField extends Component<TransformProps<NormalizeFi
                 onChange={this._onChangeSubstitution}
                 onEndEdit={this._onEndEditSubstitution}
                 substitution={{
+                  invalid: false,
                   pattern: '',
                   replacement: ''
                 }}

lib/manager/components/transform/SubstitutionRow.js

@@ -29,9 +29,10 @@ const buttonGroupStyle = { width: '60px' }
  * Extract just the subset of fields to build the state variable.
  */
 function extractStateFields (props: Props): Substitution {
-  const { description, normalizeSpace, pattern, replacement } = props.substitution
+  const { description, invalid, normalizeSpace, pattern, replacement } = props.substitution
   return {
     description: description || '',
+    invalid,
     normalizeSpace,
     pattern,
     replacement
@@ -41,10 +42,17 @@ function extractStateFields (props: Props): Substitution {
 /**
  * @returns true if the given substitution pattern is null or empty, false otherwise.
  */
-export function isSubstitutionInvalid (substitution: Substitution) {
+export function isSubstitutionBlank (substitution: Substitution) {
   return !substitution.pattern || substitution.pattern === ''
 }
 
+/**
+ * @returns true if the given substitution is marked invalid by the backend, false otherwise.
+ */
+export function isSubstitutionInvalid (substitution: Substitution) {
+  return substitution.invalid
+}
+
 /**
  * Renders and lets user edit a substitution.
  */
@@ -137,18 +145,29 @@ export default class SubstitutionRow extends Component<Props, Substitution> {
   }
 
   render () {
-    const { activeEditingIndex } = this.props
-    const { description, normalizeSpace, pattern, replacement } = this.state
+    const { activeEditingIndex, substitution: originalSubstitution } = this.props
+    const { description, invalid, normalizeSpace, pattern, replacement } = this.state
     const regexTestLink = `https://regexr.com/?expression=${encodeURIComponent(pattern)}&text=${STRING_FOR_REGEXR_TEST}`
     const isEditing = this._isEditing()
     const allowEdit = activeEditingIndex === -1
-    const isEditingInvalid = isSubstitutionInvalid(this.state)
+    const isPatternBlank = isSubstitutionBlank(this.state)
+    const isPatternInvalid = invalid && pattern === originalSubstitution.pattern
+    const isEditingInvalid = isPatternBlank || isPatternInvalid
+    let validationMessage = null
+    if (isPatternBlank) {
+      validationMessage = 'The substitution search pattern cannot be empty'
+    } else if (isPatternInvalid) {
+      validationMessage = `The substitution search pattern '${originalSubstitution.pattern}' is invalid`
+    }
 
     // Construct CSS class for row
     const editingClassName = isEditing ? '' : 'inactive'
     const allowEditClassName = allowEdit ? 'allow-edit' : ''
     const rowClassName = `substitution-row ${editingClassName} ${allowEditClassName}`
 
+    // Override style for inputs with invalid search patterns.
+    const patternStyleOverride = isPatternInvalid ? { borderColor: 'inherit' } : null
+
     return (
       <tr className={rowClassName}>
         <td>
@@ -163,10 +182,11 @@ export default class SubstitutionRow extends Component<Props, Substitution> {
                 onKeyDown={this._onKeyDown}
                 placeholder='Text (regex) to find'
                 readOnly={!isEditing}
-                title={isEditingInvalid ? 'Substitution search pattern cannot be empty' : null}
+                style={patternStyleOverride}
+                title={validationMessage}
                 value={pattern}
               />
-              <InputGroup.Addon>
+              <InputGroup.Addon style={patternStyleOverride}>
                 <a
                   href={regexTestLink}
                   target='_blank'
@@ -217,9 +237,9 @@ export default class SubstitutionRow extends Component<Props, Substitution> {
               <ButtonGroup style={buttonGroupStyle}>
                 <Button
                   bsSize='xsmall'
-                  disabled={isEditingInvalid}
+                  disabled={isPatternInvalid}
                   onClick={this._onClickSave}
-                  title={isEditingInvalid ? 'Unable to save, there are errors in this row.' : 'Save changes in this row'}
+                  title={isPatternInvalid ? 'Unable to save, there are errors in this row.' : 'Save changes in this row'}
                 >
                   <Icon type='check' />
                 </Button>

lib/types/index.js

@@ -301,6 +301,7 @@ export type FetchFrequency = $Values<typeof FETCH_FREQUENCIES>
 
 export type Substitution = {
   description?: string,
+  invalid: boolean,
   normalizeSpace?: boolean,
   pattern: string,
   replacement: string