Merge pull request #4141 from 10up/feature/issue-4123-req-3

Feature Field Dependency (Issue 4123 Req 3)

Author: felipeelia

assets/js/features/components/settings.js

@@ -20,7 +20,7 @@ import Control from './control';
 export default ({ feature, settingsSchema }) => {
 	const { getFeature, settings, setSettings, syncedSettings } = useFeatureSettings();
 
-	const { isAvailable } = getFeature(feature);
+	const { isAvailable, defaultSettings } = getFeature(feature);
 
 	/**
 	 * Change event handler.
@@ -38,6 +38,51 @@ export default ({ feature, settingsSchema }) => {
 		});
 	};
 
+	/**
+	 * Determines whether a control should be rendered based on its requirements.
+	 *
+	 * @param {object} requires_fields An object representing the required field values for rendering.
+	 * Can contain 'conditions' object with field requirements and 'relationship' key ('AND' or 'OR').
+	 * @returns {boolean} Returns `true` if the control should be rendered, otherwise `false`.
+	 */
+	const shouldRenderControl = (requires_fields) => {
+		if (!requires_fields || Object.keys(requires_fields).length === 0) {
+			return true;
+		}
+
+		// Get field requirements from 'conditions' key
+		let fieldRequirements;
+
+		if (requires_fields.conditions) {
+			fieldRequirements = Object.entries(requires_fields.conditions);
+		}
+
+		// If no actual field requirements, return true
+		if (fieldRequirements.length === 0) {
+			return true;
+		}
+
+		// Define the condition check function
+		const checkCondition = ([fieldKey, requiredValue]) => {
+			const actualValue = settings[feature]?.[fieldKey];
+			const defaultValue = defaultSettings[fieldKey] ?? false;
+			return actualValue === requiredValue ?? actualValue === defaultValue;
+		};
+
+		// Extract relationship type, default to 'AND'
+		const relationship = (requires_fields.relationship || 'AND').toUpperCase();
+
+		// Apply the appropriate logic based on relationship type
+		switch (relationship) {
+			case 'OR':
+				return fieldRequirements.some(checkCondition);
+			case 'AND':
+			default:
+				// Default to AND for any unexpected values
+				return fieldRequirements.every(checkCondition);
+		}
+	};
+
 	return settingsSchema.map((s) => {
 		const {
 			default: defaultValue,
@@ -48,13 +93,17 @@ export default ({ feature, settingsSchema }) => {
 			options,
 			requires_feature,
 			requires_sync,
+			requires_fields,
 			type,
 		} = s;
 
 		/**
-		 * Current control value. If no setting value is set, use the
-		 * setting's default value.
+		 * Skip rendering if the control should not be rendered based on requires_fields.
 		 */
+		if (!shouldRenderControl(requires_fields)) {
+			return null;
+		}
+
 		let value =
 			typeof settings[feature]?.[key] !== 'undefined' ? settings[feature][key] : defaultValue;
 

tests/cypress/integration/features/interface.cy.js

@@ -11,7 +11,7 @@ describe('Feature Grouping and Persistence', () => {
 	 */
 	const panelSelector = 'div[id*="Live Search-view"]:has(.is-opened)';
 
-	it('Renders group tabs and persists across reloads', () => {
+	it('Renders group tabs, persists across reloads, and supports field dependency', () => {
 		// Log in as an admin user (assumes cy.login() is a custom Cypress command).
 		cy.login();
 
@@ -52,5 +52,76 @@ describe('Feature Grouping and Persistence', () => {
 						cy.get('div[id*="autosuggest-view"]').should('be.visible');
 					});
 			});
+
+		cy.visit('/wp-admin/admin.php?page=elasticpress');
+
+		// Test case to verify a conditional feature is hidden until its requirement is met
+		cy.window()
+			.then((win) => {
+				// Wait until epDashboard and features are available
+				return new Cypress.Promise((resolve) => {
+					const check = () => {
+						if (win.epDashboard && win.epDashboard.features) {
+							resolve(win);
+						} else {
+							setTimeout(check, 50);
+						}
+					};
+					check();
+				});
+			})
+			.then((win) => {
+				win.epDashboard.features[0].settingsSchema.push({
+					default: '1',
+					key: 'test_field',
+					label: 'Testing Field 1',
+					options: [
+						{
+							label: 'Option A',
+							value: '0',
+						},
+						{
+							label: 'Option B',
+							value: '1',
+						},
+					],
+					type: 'radio',
+				});
+				win.epDashboard.features[0].settingsSchema.push({
+					default: '1',
+					key: 'test_field_2',
+					label: 'Testing Field 2',
+					options: [
+						{
+							label: 'Option A',
+							value: '0',
+						},
+						{
+							label: 'Option B',
+							value: '1',
+						},
+					],
+					type: 'radio',
+					requires_fields: {
+						conditions: {
+							test_field: '0',
+						},
+					},
+				});
+			});
+
+		// Toggle Re-Render
+		cy.contains('button', 'Live Search').click();
+		cy.contains('button', 'Core Search').click();
+
+		cy.contains('.ep-dashboard-control', 'Testing Field 2').should('not.exist');
+
+		cy.contains('.ep-dashboard-control', 'Testing Field 1').as('testField');
+
+		// inside of testField, find the input with the label "Option A" and click it
+		cy.get('@testField').find('input[value="0"]').click();
+
+		// now, Testing Field 2 should be visible
+		cy.contains('.ep-dashboard-control', 'Testing Field 2').should('exist');
 	});
 });