Add advanced setting option (#36380)

* Modify feature flag

* Add tooltip to WC > Settings > Advanced > Features

* Add Settings option

* Add `optional_features` and `beta_features` option

* Add changelog

* Fix lint

* Fix lint

* Add `new_product_management` to legacy features

* Fix escaped tooltip

* Fix `Analytics pages` e2e tests

* Fix `Payment setup task` e2e tests

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>

plugins/woocommerce/changelog/add-36163_advanced_setting_option

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Add advanced setting option

plugins/woocommerce/client/admin/config/core.json

@@ -14,7 +14,7 @@
 		"minified-js": false,
 		"mobile-app-banner": true,
 		"navigation": true,
-		"new-product-management-experience": false,
+		"new-product-management-experience": true,
 		"onboarding": true,
 		"onboarding-tasks": true,
 		"product-variation-management": false,

plugins/woocommerce/client/admin/config/development.json

@@ -14,7 +14,7 @@
 		"minified-js": true,
 		"mobile-app-banner": true,
 		"navigation": true,
-		"new-product-management-experience": false,
+		"new-product-management-experience": true,
 		"onboarding": true,
 		"onboarding-tasks": true,
 		"payment-gateway-suggestions": true,

plugins/woocommerce/client/legacy/css/admin.scss

@@ -4375,6 +4375,11 @@ img.help_tip {
 			top: 20px;
 		}
 
+		td.help-tooltip {
+			white-space: nowrap;
+			width: 8px;
+		}
+
 		.select2-container {
 			vertical-align: top;
 			margin-bottom: 3px;

plugins/woocommerce/includes/admin/class-wc-admin-settings.php

@@ -492,6 +492,7 @@ if ( ! class_exists( 'WC_Admin_Settings', false ) ) :
 							?>
 								<tr valign="top" class="<?php echo esc_attr( implode( ' ', $visibility_class ) ); ?>">
 									<th scope="row" class="titledesc"><?php echo esc_html( $value['title'] ); ?></th>
+									<td class="help-tooltip"><?php echo isset( $value['tooltip'] ) && '' !== $value['tooltip'] ? wc_help_tip( esc_html( $value['tooltip'] ) ) : ''; ?></td>
 									<td class="forminp forminp-checkbox">
 										<fieldset>
 							<?php

plugins/woocommerce/src/Admin/Features/Features.php

@@ -29,6 +29,7 @@ class Features {
 		'multichannel-marketing'            => array( 'default' => 'no' ),
 		'navigation'                        => array( 'default' => 'no' ),
 		'settings'                          => array( 'default' => 'no' ),
+		'new-product-management-experience' => array( 'default' => 'no' ),
 		'analytics'                         => array( 'default' => 'yes' ),
 		'remote-inbox-notifications'        => array( 'default' => 'yes' ),
 	);
@@ -41,6 +42,7 @@ class Features {
 	protected static $beta_features = array(
 		'multichannel-marketing',
 		'navigation',
+		'new-product-management-experience',
 		'settings',
 	);
 

plugins/woocommerce/src/Admin/Features/NewProductManagementExperience.php

@@ -13,6 +13,11 @@ use \Automattic\WooCommerce\Internal\Admin\Loader;
  */
 class NewProductManagementExperience {
 
+	/**
+	 * Option name used to toggle this feature.
+	 */
+	const TOGGLE_OPTION_NAME = 'woocommerce_new_product_management_enabled';
+
 	/**
 	 * Constructor
 	 */

plugins/woocommerce/src/Internal/Features/FeaturesController.php

@@ -8,6 +8,7 @@ namespace Automattic\WooCommerce\Internal\Features;
 use Automattic\Jetpack\Constants;
 use Automattic\WooCommerce\Internal\Admin\Analytics;
 use Automattic\WooCommerce\Admin\Features\Navigation\Init;
+use Automattic\WooCommerce\Admin\Features\NewProductManagementExperience;
 use Automattic\WooCommerce\Internal\Traits\AccessiblePrivateMethods;
 use Automattic\WooCommerce\Proxies\LegacyProxy;
 use Automattic\WooCommerce\Utilities\ArrayUtil;
@@ -100,6 +101,12 @@ class FeaturesController {
 				'description'     => __( 'Adds the new WooCommerce navigation experience to the dashboard', 'woocommerce' ),
 				'is_experimental' => false,
 			),
+			'new_product_management' => array(
+				'name'            => __( 'New product editor', 'woocommerce' ),
+				'description'     => __( 'Try the new product editor (Beta)', 'woocommerce' ),
+				'tooltip'         => __( 'Enable to try the new, simplified product editor (currently in development and only available for simple products). No extension support yet.', 'woocommerce' ),
+				'is_experimental' => false,
+			),
 			'custom_order_tables'    => array(
 				'name'            => __( 'High-Performance order storage (COT)', 'woocommerce' ),
 				'description'     => __( 'Enable the high performance order storage feature.', 'woocommerce' ),
@@ -107,7 +114,7 @@ class FeaturesController {
 			),
 		);
 
-		$this->legacy_feature_ids = array( 'analytics', 'new_navigation' );
+		$this->legacy_feature_ids = array( 'analytics', 'new_navigation', 'new_product_management' );
 
 		$this->init_features( $features );
 
@@ -393,6 +400,8 @@ class FeaturesController {
 			return Analytics::TOGGLE_OPTION_NAME;
 		} elseif ( 'new_navigation' === $feature_id ) {
 			return Init::TOGGLE_OPTION_NAME;
+		} elseif ( 'new_product_management' === $feature_id ) {
+			return NewProductManagementExperience::TOGGLE_OPTION_NAME;
 		}
 
 		return "woocommerce_feature_${feature_id}_enabled";
@@ -450,7 +459,7 @@ class FeaturesController {
 		$matches = array();
 		$success = preg_match( '/^woocommerce_feature_([a-zA-Z0-9_]+)_enabled$/', $option, $matches );
 
-		if ( ! $success && Analytics::TOGGLE_OPTION_NAME !== $option && Init::TOGGLE_OPTION_NAME !== $option ) {
+		if ( ! $success && Analytics::TOGGLE_OPTION_NAME !== $option && Init::TOGGLE_OPTION_NAME !== $option && NewProductManagementExperience::TOGGLE_OPTION_NAME !== $option ) {
 			return;
 		}
 
@@ -462,6 +471,8 @@ class FeaturesController {
 			$feature_id = 'analytics';
 		} elseif ( Init::TOGGLE_OPTION_NAME === $option ) {
 			$feature_id = 'new_navigation';
+		} elseif ( NewProductManagementExperience::TOGGLE_OPTION_NAME === $option ) {
+			$feature_id = 'new_product_management';
 		} else {
 			$feature_id = $matches[1];
 		}
@@ -590,6 +601,7 @@ class FeaturesController {
 		$description = $feature['description'];
 		$disabled    = false;
 		$desc_tip    = '';
+		$tooltip     = isset( $feature['tooltip'] ) ? $feature['tooltip'] : '';
 
 		if ( ( 'analytics' === $feature_id || 'new_navigation' === $feature_id ) && $admin_features_disabled ) {
 			$disabled = true;
@@ -675,6 +687,7 @@ class FeaturesController {
 			'id'       => $this->feature_enable_option_name( $feature_id ),
 			'disabled' => $disabled && ! $this->force_allow_enabling_features,
 			'desc_tip' => $desc_tip,
+			'tooltip'  => $tooltip,
 			'default'  => $this->feature_is_enabled_by_default( $feature_id ) ? 'yes' : 'no',
 		);
 	}

plugins/woocommerce/tests/e2e-pw/tests/admin-analytics/analytics.spec.js

@@ -23,7 +23,9 @@ test.describe( 'Analytics pages', () => {
 			await page.goto(
 				`/wp-admin/admin.php?page=wc-admin&path=%2Fanalytics%2F${ urlTitle }`
 			);
-			const pageTitle = page.locator( 'h1' );
+			const pageTitle = page.locator(
+				'.woocommerce-layout__header-wrapper > h1'
+			);
 			await expect( pageTitle ).toContainText( aPages );
 			await expect(
 				page.locator( '#woocommerce-layout__primary' )

plugins/woocommerce/tests/e2e-pw/tests/admin-tasks/payment.spec.js

@@ -5,7 +5,9 @@ test.describe('Payment setup task', () => {
 	test.use( { storageState: process.env.ADMINSTATE } );
 
 	test.beforeEach( async ( { page } ) => {
-		await page.goto('wp-admin/admin.php?page=wc-admin&path=/setup-wizard');
+		await page.goto(
+			'wp-admin/admin.php?page=wc-admin&path=/setup-wizard'
+		);
 		await page.click( 'text=Skip setup store details' );
 		await page.click( 'text=No thanks' );
 		await page.waitForLoadState( 'networkidle' );
@@ -31,7 +33,9 @@ test.describe('Payment setup task', () => {
 	} ) => {
 		await page.goto( 'wp-admin/admin.php?page=wc-admin' );
 		await page.click( 'text=Set up payments' );
-		await expect(page.locator('h1')).toHaveText('Set up payments');
+		await expect(
+			page.locator( '.woocommerce-layout__header-wrapper > h1' )
+		).toHaveText( 'Set up payments' );
 	} );
 
 	test( 'Saving valid bank account transfer details enables the payment method', async ( {
@@ -63,7 +67,9 @@ test.describe('Payment setup task', () => {
 		await page.goto( 'wp-admin/admin.php?page=wc-settings&tab=checkout' );
 
 		await expect(
-			page.locator('//tr[@data-gateway_id="bacs"]/td[@class="status"]/a')
+			page.locator(
+				'//tr[@data-gateway_id="bacs"]/td[@class="status"]/a'
+			)
 		).toHaveClass( 'wc-payment-gateway-method-toggle-enabled' );
 	} );