Display confirmation message when toggling features that require rein…

…dex.
10up · felipeelia · Dec 6, 2021 · Dec 6, 2021 · Dec 6, 2021 · Dec 6, 2021
commit 9d59f58ae16440e6034e115658d29ed3258fbfa5
diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css
@@ -312,6 +312,11 @@ h2.ep-list-features {
 	border-left: 4px solid var(--statusOk);
 	margin-bottom: 10px;
 	padding: 8px 12px;
+
+	&.requirements-status-notice--reindex {
+		border-color: var(--statusWarning);
+		display: none; /* Controlled by JavaScript. */
+	}
 }
 
 .ep-feature .settings .action-wrap {

diff --git a/assets/js/dashboard.js b/assets/js/dashboard.js
@@ -1,4 +1,6 @@
 /* eslint-disable camelcase, no-use-before-define */
+import { __ } from '@wordpress/i18n';
+
 const { ajaxurl, epDash } = window;
 
 const $features = jQuery(document.getElementsByClassName('ep-features'));
@@ -27,7 +29,7 @@ $features.on('click', '.save-settings', function (event) {
 		return;
 	}
 
-	const feature = event.target.getAttribute('data-feature');
+	const { feature, requiresReindex, wasActive } = event.target.dataset;
 	const $feature = $features.find(`.ep-feature-${feature}`);
 	const settings = {};
 	const $settings = $feature.find('.setting-field');
@@ -47,6 +49,22 @@ $features.on('click', '.save-settings', function (event) {
 		}
 	});
 
+	const requiresConfirmation = requiresReindex && wasActive !== settings.active;
+
+	if (requiresConfirmation) {
+		// eslint-disable-next-line no-alert
+		const isConfirmed = window.confirm(
+			__(
+				'Toggling this feature will begin re-indexing your content. Do you wish to proceed?',
+				'elasticpress',
+			),
+		);
+
+		if (!isConfirmed) {
+			return;
+		}
+	}
+
 	$feature.addClass('saving');
 
 	jQuery
@@ -70,6 +88,8 @@ $features.on('click', '.save-settings', function (event) {
 					$feature.removeClass('feature-active');
 				}
 
+				event.target.dataset.wasActive = settings.active;
+
 				if (response.data.reindex) {
 					window.location = epDash.sync_url;
 
@@ -137,3 +157,20 @@ $epCredentialsTab.on('click', (e) => {
 		$epCredentialsAdditionalFields.attr('aria-hidden', 'true');
 	}
 });
+
+$features.on('change', '.js-toggle-feature', function (event) {
+	const container = event.currentTarget
+		.closest('.settings')
+		.querySelector('.requirements-status-notice--reindex');
+
+	const { value } = event.target;
+	const { requiresReindex, wasActive } = event.currentTarget.dataset;
+
+	if (requiresReindex && wasActive !== value) {
+		container.style.display = 'block';
+	} else {
+		container.style.display = null;
+	}
+
+	event.currentTarget.dataset.requiresReindex = value;
+});
diff --git a/dist/css/dashboard-styles.min.css b/dist/css/dashboard-styles.min.css
diff --git a/dist/js/dashboard-script.min.js b/dist/js/dashboard-script.min.js
diff --git a/includes/classes/Feature.php b/includes/classes/Feature.php
@@ -267,10 +267,16 @@ public function output_settings_box() {
 			<?php endforeach; ?>
 		<?php endif; ?>
 
+		<?php if ( $this->requires_install_reindex ) : ?>
+			<div class="requirements-status-notice requirements-status-notice--reindex" role="status">
+				<?php esc_html_e( 'Toggling this feature will require re-indexing your content.', 'elasticpress'); ?>
+			</div>
+		<?php endif; ?>
+
 		<h3><?php esc_html_e( 'Settings', 'elasticpress' ); ?></h3>
 
 		<div class="feature-fields">
-			<div class="field js-toggle-feature" data-feature="<?php echo esc_attr( $this->slug ); ?>">
+			<div class="field js-toggle-feature" data-feature="<?php echo esc_attr( $this->slug ); ?>" data-requires-reindex="<?php echo $this->requires_install_reindex ? '1' : '0'; ?>" data-was-active="<?php echo $this->is_active() ? '1' : '0'; ?>">
 				<div class="field-name status"><?php esc_html_e( 'Status', 'elasticpress' ); ?></div>
 				<div class="input-wrap <?php if ( 2 === $requirements_status->code ) : ?>disabled<?php endif; ?>">
 					<label for="feature_active_<?php echo esc_attr( $this->slug ); ?>_enabled"><input name="feature_active_<?php echo esc_attr( $this->slug ); ?>" id="feature_active_<?php echo esc_attr( $this->slug ); ?>_enabled" data-field-name="active" class="setting-field" <?php if ( 2 === $requirements_status->code ) : ?>disabled<?php endif; ?> type="radio" <?php if ( $this->is_active() ) : ?>checked<?php endif; ?> value="1"><?php esc_html_e( 'Enabled', 'elasticpress' ); ?></label><br>
@@ -288,7 +294,13 @@ public function output_settings_box() {
 				<?php esc_html_e( 'Setting adjustments to this feature require a re-sync. Use WP-CLI.', 'elasticpress' ); ?>
 			</span>
 
-			<a data-feature="<?php echo esc_attr( $this->slug ); ?>" class="<?php if ( 2 === $requirements_status->code || ( $this->requires_install_reindex && defined( 'EP_DASHBOARD_SYNC' ) && ! EP_DASHBOARD_SYNC ) ) : ?>disabled<?php endif; ?> button button-primary save-settings"><?php esc_html_e( 'Save', 'elasticpress' ); ?></a>
+			<a
+				data-feature="<?php echo esc_attr( $this->slug ); ?>"
+				data-requires-reindex="<?php echo $this->requires_install_reindex ? '1' : '0'; ?>"
+				data-was-active="<?php echo $this->is_active() ? '1' : '0'; ?>"
+				class="<?php if ( 2 === $requirements_status->code || ( $this->requires_install_reindex && defined( 'EP_DASHBOARD_SYNC' ) && ! EP_DASHBOARD_SYNC ) ) : ?>disabled<?php endif; ?> button button-primary save-settings">
+					<?php esc_html_e( 'Save', 'elasticpress' ); ?>
+			</a>
 		</div>
 		<?php
 	}