feat: improve conditional fields

martinjagodic · martinjagodic · commit e7287be9037c · 2025-11-13T12:50:12.000+01:00
- replace operator with descriptive names,
- add tests, add regex, includes, oneOf
diff --git a/cypress/e2e/conditional_fields_spec.js b/cypress/e2e/conditional_fields_spec.js
diff --git a/dev-test/config.yml b/dev-test/config.yml
@@ -161,13 +161,20 @@ collections: # A list of collections the CMS should be able to edit
           multiple: true,
         }
       - { label: 'Hidden', name: 'hidden', widget: 'hidden', default: 'hidden' }
-      - { label: 'Conditional string', name: 'conditional_string', widget: 'string', condition: { field: 'select', value: 'a', operator: '!=' } }
+  - { label: 'Conditional string', name: 'conditional_string', widget: 'string', condition: { field: 'select', value: 'a', operator: 'notEqual' } }
       - label: 'Conditional object'
         name: 'conditional_object'
         widget: 'object'
         condition: { field: 'boolean', value: true }
         fields:
           - { label: 'Title', name: 'title', widget: 'string' }
+      - label: 'Conditional oneOf'
+        name: 'conditional_oneof'
+        widget: 'string'
+        condition: { field: 'select', value: ['a', 'b'], operator: 'oneOf' }
+      - { label: 'Conditional regex', name: 'conditional_regex', widget: 'string', condition: { field: 'select', value: '/^(a|b)$/', operator: 'matches' } }
+      - { label: 'Conditional regex ci', name: 'conditional_regex_ci', widget: 'string', condition: { field: 'string', value: '/foo/i', operator: 'matches' } }
+  - { label: 'Conditional notRegex', name: 'conditional_not_regex', widget: 'string', condition: { field: 'string', value: '/^(?!\\d{3}-\\d{3}$).*$/', operator: 'matches' } }
       - { label: 'Color', name: 'color', widget: 'color' }
       - label: 'Object'
         name: 'object'
@@ -189,6 +196,7 @@ collections: # A list of collections the CMS should be able to edit
           - { label: 'Image', name: 'image', widget: 'image' }
           - { label: 'File', name: 'file', widget: 'file' }
           - { label: 'Select', name: 'select', widget: 'select', options: ['a', 'b', 'c'] }
+          - { label: 'Nested Conditional', name: 'nested_conditional', widget: 'string', condition: { field: 'object.select', value: 'a' } }
       - label: 'List'
         name: 'list'
         widget: 'list'
@@ -202,6 +210,7 @@ collections: # A list of collections the CMS should be able to edit
           - { label: 'Image', name: 'image', widget: 'image' }
           - { label: 'File', name: 'file', widget: 'file' }
           - { label: 'Select', name: 'select', widget: 'select', options: ['a', 'b', 'c'] }
+          - { label: 'List Wildcard Conditional', name: 'wildcard_cond', widget: 'string', condition: { field: 'list.*.select', value: 'b' } }
           - label: 'Object'
             name: 'object'
             widget: 'object'
@@ -278,6 +287,44 @@ collections: # A list of collections the CMS should be able to edit
             fields:
               - { label: 'Image', name: 'image', widget: 'image' }
               - { label: 'File', name: 'file', widget: 'file' }
+      - label: 'Structure List with Wildcard Conditionals'
+        name: 'structure'
+        widget: 'list'
+        types:
+          - label: 'Image Block'
+            name: 'image'
+            widget: 'object'
+            fields:
+              - { label: 'Image', name: 'image', widget: 'image' }
+              - { label: 'Caption', name: 'caption', widget: 'string' }
+              - { label: 'Alt Text', name: 'alt', widget: 'string' }
+          - label: 'Text Block'
+            name: 'text'
+            widget: 'object'
+            fields:
+              - { label: 'Content', name: 'content', widget: 'markdown' }
+              - { label: 'Alignment', name: 'alignment', widget: 'select', options: ['left', 'center', 'right'] }
+          - label: 'Video Block'
+            name: 'video'
+            widget: 'object'
+            fields:
+              - { label: 'Video URL', name: 'url', widget: 'string' }
+              - { label: 'Thumbnail', name: 'thumbnail', widget: 'image' }
+              - { label: 'Autoplay', name: 'autoplay', widget: 'boolean', default: false }
+      - label: 'Image Options'
+        name: 'image_options'
+        widget: 'object'
+        condition: { field: 'structure.*.type', value: 'image' }
+        fields:
+          - { label: 'Image Quality', name: 'quality', widget: 'number', min: 1, max: 100, default: 80 }
+          - { label: 'Image Format', name: 'format', widget: 'select', options: ['jpg', 'png', 'webp'] }
+      - label: 'Video Options'
+        name: 'video_options'
+        widget: 'object'
+        condition: { field: 'structure.*.type', value: 'video' }
+        fields:
+          - { label: 'Video Quality', name: 'quality', widget: 'select', options: ['360p', '720p', '1080p'] }
+          - { label: 'Captions', name: 'captions', widget: 'boolean', default: true }
   - name: pages # a nested collection
     label: Pages
     label_singular: 'Page'
diff --git a/packages/decap-cms-core/index.d.ts b/packages/decap-cms-core/index.d.ts
@@ -53,8 +53,23 @@ declare module 'decap-cms-core' {
 
   interface Condition {
     field: string;
-    value: string | boolean | number;
-    operator?: '==' | '!=' | '>' | '<' | '>=' | '<=';
+    value:
+      | string
+      | boolean
+      | number
+      | RegExp
+      | { regex: string; flags?: string }
+      | (string | boolean | number)[];
+    operator?:
+      | 'equal'
+      | 'notEqual'
+      | 'greaterThan'
+      | 'lessThan'
+      | 'greaterThanOrEqual'
+      | 'lessThanOrEqual'
+      | 'oneOf'
+      | 'includes'
+      | 'matches';
   }
 
   export interface CmsFieldBase {
diff --git a/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControlPane.js b/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControlPane.js
@@ -94,31 +94,103 @@ function getFieldValue({ field, entry, isTranslatable, locale }) {
   return entry.getIn(['data', field.get('name')]);
 }
 
-function calculateCondition({ field, fields, entry, locale, isTranslatable }) {
+function calculateCondition({ field, fields, entry, locale, isTranslatable, listIndexes = [] }) {
   const condition = field.get('condition');
   if (!condition) return true;
 
-  const condFieldName = condition.get('field');
-  const operator = condition.get('operator') || '==';
+  // Get field name - supports simple names, dot-notated paths, and wildcards
+  let condFieldName = condition.get('field');
+  if (!condFieldName) return true;
+
+  // Operators are descriptive (equal, notEqual, greaterThan, etc.)
+  const operator = condition.get('operator') || 'equal';
   const condValue = condition.get('value');
 
-  const condField = fields.find(f => f.get('name') === condFieldName);
-  let condFieldValue = getFieldValue({ field: condField, entry, locale, isTranslatable });
+  // Handle wildcard paths (e.g., 'structure.*.type')
+  if (condFieldName.includes('*')) {
+    condFieldName = condFieldName.split('*').reduce((acc, item, i) => {
+      return `${acc}${item}${listIndexes[i] >= 0 ? listIndexes[i] : ''}`;
+    }, '');
+  }
+
+  // Get the field value - all field references are treated as potentially nested paths
+  let condFieldValue;
+  if (condFieldName.includes('.')) {
+    // For dot-notated paths, traverse the entry data directly
+    const dataPath = condFieldName.split('.');
+    const entryData = entry.get('data');
+    condFieldValue = entryData ? entryData.getIn(dataPath) : undefined;
+  } else {
+    // For simple field names, use the existing getFieldValue logic
+    const condField = fields.find(f => f.get('name') === condFieldName);
+    if (condField) {
+      condFieldValue = getFieldValue({ field: condField, entry, locale, isTranslatable });
+    }
+  }
+
+  // Convert Immutable to JS if needed
   condFieldValue = condFieldValue?.toJS ? condFieldValue.toJS() : condFieldValue;
 
+  // Handle different operators
   switch (operator) {
-    case '==':
+    case 'equal':
       return condFieldValue == condValue;
-    case '!=':
+    case 'notEqual':
       return condFieldValue != condValue;
-    case '<':
-      return condFieldValue < condValue;
-    case '>':
+    case 'greaterThan':
       return condFieldValue > condValue;
-    case '<=':
-      return condFieldValue <= condValue;
-    case '>=':
+    case 'lessThan':
+      return condFieldValue < condValue;
+    case 'greaterThanOrEqual':
       return condFieldValue >= condValue;
+    case 'lessThanOrEqual':
+      return condFieldValue <= condValue;
+    case 'oneOf': {
+      const valueArray = condValue?.toJS ? condValue.toJS() : condValue;
+      return Array.isArray(valueArray) && valueArray.includes(condFieldValue);
+    }
+    case 'includes': {
+      const rawValue = condValue?.toJS ? condValue.toJS() : condValue;
+      // If field value is array, check inclusion; if string, check substring
+      if (Array.isArray(condFieldValue)) return condFieldValue.includes(rawValue);
+      const target = condFieldValue == null ? '' : String(condFieldValue);
+      return String(rawValue) !== undefined && target.includes(String(rawValue));
+    }
+    case 'matches': {
+      const rawCondValue = condValue?.toJS ? condValue.toJS() : condValue;
+
+      // Determine regex pattern/flags from value
+      let pattern;
+      let flags;
+
+      if (rawCondValue instanceof RegExp) {
+        pattern = rawCondValue.source;
+        flags = rawCondValue.flags;
+      } else if (typeof rawCondValue === 'string') {
+        const match = rawCondValue.match(/^\/(.*)\/([gimsuy]*)$/);
+        if (match) {
+          pattern = match[1];
+          flags = match[2] || undefined;
+        } else {
+          // if plain string, fallback to substring match semantics
+          const target = condFieldValue == null ? '' : String(condFieldValue);
+          return target.includes(rawCondValue);
+        }
+      } else if (rawCondValue && typeof rawCondValue === 'object' && rawCondValue.regex) {
+        pattern = rawCondValue.regex;
+        flags = rawCondValue.flags;
+      } else {
+        return false;
+      }
+
+      try {
+        const re = new RegExp(pattern, flags);
+        const target = condFieldValue == null ? '' : String(condFieldValue);
+        return re.test(target);
+      } catch (e) {
+        return false;
+      }
+    }
     default:
       return condFieldValue == condValue;
   }
@@ -141,6 +213,21 @@ export default class ControlPane extends React.Component {
     this.controlRef(field, wrappedControl);
   };
 
+  fieldCondition = (field, listIndexes = []) => {
+    const { entry, collection, fields } = this.props;
+    const locale = this.state.selectedLocale;
+    const isTranslatable = hasI18n(collection);
+
+    return calculateCondition({
+      field,
+      fields,
+      entry,
+      locale,
+      isTranslatable,
+      listIndexes,
+    });
+  };
+
   handleLocaleChange = val => {
     this.setState({ selectedLocale: val });
     this.props.onLocaleChange(val);
@@ -296,6 +383,8 @@ export default class ControlPane extends React.Component {
                 isFieldDuplicate={field => isFieldDuplicate(field, locale, defaultLocale)}
                 isFieldHidden={field => isFieldHidden(field, locale, defaultLocale)}
                 locale={locale}
+                listIndexes={[]}
+                fieldCondition={this.fieldCondition}
               />
             );
           })}
diff --git a/packages/decap-cms-core/src/components/Editor/EditorControlPane/Widget.js b/packages/decap-cms-core/src/components/Editor/EditorControlPane/Widget.js
@@ -326,6 +326,8 @@ export default class Widget extends Component {
       isFieldHidden,
       locale,
       isParentListCollapsed,
+      listIndexes,
+      fieldCondition,
     } = this.props;
 
     return React.createElement(controlComponent, {
@@ -379,6 +381,8 @@ export default class Widget extends Component {
       isFieldHidden,
       locale,
       isParentListCollapsed,
+      listIndexes,
+      fieldCondition,
     });
   }
 }
diff --git a/packages/decap-cms-core/src/constants/configSchema.js b/packages/decap-cms-core/src/constants/configSchema.js
@@ -73,9 +73,42 @@ function fieldsConfig() {
           type: 'object',
           properties: {
             field: { type: 'string' },
-            value: { types: ['string', 'boolean'] },
-            operator: { type: 'string', enum: ['==', '!=', '>', '<', '>=', '<='] },
+            value: {
+              oneOf: [
+                { type: 'string' },
+                // Allow regex as a string like '/pattern/flags' or as an object { regex, flags }
+                {
+                  type: 'object',
+                  properties: { regex: { type: 'string' }, flags: { type: 'string' } },
+                  required: ['regex'],
+                  additionalProperties: false,
+                },
+                { type: 'boolean' },
+                { type: 'number' },
+                {
+                  type: 'array',
+                  items: {
+                    oneOf: [{ type: 'string' }, { type: 'boolean' }, { type: 'number' }],
+                  },
+                },
+              ],
+            },
+            operator: {
+              type: 'string',
+              enum: [
+                'equal',
+                'notEqual',
+                'greaterThan',
+                'lessThan',
+                'greaterThanOrEqual',
+                'lessThanOrEqual',
+                'oneOf',
+                'includes',
+                'matches',
+              ],
+            },
           },
+          required: ['field'],
         },
       },
       select: { $data: '0/widget' },
diff --git a/packages/decap-cms-core/src/types/redux.ts b/packages/decap-cms-core/src/types/redux.ts
@@ -69,8 +69,23 @@ export interface CmsI18nConfig {
 
 interface Condition {
   field: string;
-  value: string | boolean | number;
-  operator?: '==' | '!=' | '>' | '<' | '>=' | '<=';
+  value:
+    | string
+    | boolean
+    | number
+    | RegExp
+    | { regex: string; flags?: string }
+    | (string | boolean | number)[];
+  operator?:
+    | 'equal'
+    | 'notEqual'
+    | 'greaterThan'
+    | 'lessThan'
+    | 'greaterThanOrEqual'
+    | 'lessThanOrEqual'
+    | 'oneOf'
+    | 'includes'
+    | 'matches';
 }
 
 export interface CmsFieldBase {
diff --git a/packages/decap-cms-widget-list/src/ListControl.js b/packages/decap-cms-widget-list/src/ListControl.js
@@ -644,13 +644,16 @@ export default class ListControl extends React.Component {
       parentIds,
       forID,
       t,
+      listIndexes: indexes,
+      fieldCondition,
     } = this.props;
 
     const { itemsCollapsed, keys } = this.state;
     const collapsed = itemsCollapsed[index];
     const key = keys[index];
     let field = this.props.field;
     const hasError = this.hasError(index);
+    const listIndexes = indexes?.length ? indexes.concat(index) : [index];
     const isVariableTypesList = this.getValueType() === valueTypes.MIXED;
     if (isVariableTypesList) {
       field = getTypedFieldForValue(field, item);
@@ -715,6 +718,8 @@ export default class ListControl extends React.Component {
               data-testid={`object-control-${key}`}
               hasError={hasError}
               parentIds={[...parentIds, forID, key]}
+              listIndexes={listIndexes}
+              fieldCondition={fieldCondition}
             />
           )}
         </ClassNames>
diff --git a/packages/decap-cms-widget-object/src/ObjectControl.js b/packages/decap-cms-widget-object/src/ObjectControl.js
