Add feature flag options to `wc-live-branches.user.js` user script (#46152)

* Update WooCommerce Live Branches script version to 1.1 and add feature flags options

* Add changelog

* Update options

* Add encodeURIComponent

plugins/woocommerce-beta-tester/changelog/add-feature-flags-to-tampermonkey-script

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add feature flag options to wc-live-branches user script

plugins/woocommerce-beta-tester/userscripts/wc-live-branches.user.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         WooCommerce Live Branches
 // @namespace    https://wordpress.com/
-// @version      1.0
+// @version      1.1
 // @description  Adds links to PRs pointing to Jurassic Ninja sites for live-testing a changeset
 // @grant        GM_xmlhttpRequest
 // @connect      jurassic.ninja
@@ -16,7 +16,7 @@
 ( function () {
 	const $ = jQuery.noConflict();
 	const markdownBodySelector = '.pull-discussion-timeline .markdown-body';
-	let pluginsList = null;
+	const pluginsList = null;
 
 	// Watch for relevant DOM changes that indicate we need to re-run `doit()`:
 	// - Adding a new `.markdown-body`.
@@ -55,7 +55,7 @@
 	 *
 	 * Currently looks at the URL, expecting it to match a `@match` pattern from the script header.
 	 *
-	 * @returns {string|null} Repo name.
+	 * @return {string|null} Repo name.
 	 */
 	function determineRepo() {
 		const m = location.pathname.match( /^\/([^/]+\/[^/]+)\/pull\// );
@@ -104,6 +104,16 @@
 				'<p><strong>Cannot determine the repository for this PR.</strong></p>'
 			);
 		} else {
+			// TODO: Fetch the list of feature flags dynamically from the API or something.
+			const featureFlags = [
+				'async-product-editor-category-field',
+				'launch-your-store',
+				'minified-js',
+				'new-product-management-experience',
+				'product-custom-fields',
+				'settings',
+			];
+
 			const contents = `
 					<details>
 						<summary>Expand for JN site options:</summary>
@@ -193,6 +203,15 @@
 							],
 							33
 						) }
+						<h4>Enable additional feature flags</h4>
+						${ getOptionsList(
+							featureFlags.map( ( flag ) => ( {
+								label: flag,
+								name: 'woocommerce-beta-tester-feature-flags',
+								value: flag,
+							} ) ),
+							50
+						) }
 					</details>
 					<p>
 						<a id="woocommerce-beta-branch-link" target="_blank" rel="nofollow noopener" href="#">…</a>
@@ -206,7 +225,7 @@
 		 * Encode necessary HTML entities in a string.
 		 *
 		 * @param {string} s - String to encode.
-		 * @returns {string} Encoded string.
+		 * @return {string} Encoded string.
 		 */
 		function encodeHtmlEntities( s ) {
 			return s.replace(
@@ -218,7 +237,7 @@
 		/**
 		 * Build the JN create URI.
 		 *
-		 * @returns {string} URI.
+		 * @return {string} URI.
 		 */
 		function getLink() {
 			const query = [
@@ -226,9 +245,16 @@
 				`woocommerce-beta-tester-live-branch=${ currentBranch }`,
 			];
 
+			const enabledFeatureFlags = [];
+
 			$(
 				'#woocommerce-live-branches input[type=checkbox]:checked:not([data-invert]), #woocommerce-live-branches input[type=checkbox][data-invert]:not(:checked)'
 			).each( ( i, input ) => {
+				if ( input.name === 'woocommerce-beta-tester-feature-flags' ) {
+					enabledFeatureFlags.push( input.value );
+					return;
+				}
+
 				if ( input.value ) {
 					query.push(
 						encodeURIComponent( input.name ) +
@@ -239,6 +265,15 @@
 					query.push( encodeURIComponent( input.name ) );
 				}
 			} );
+
+			if ( enabledFeatureFlags.length ) {
+				query.push(
+					`woocommerce-beta-tester-feature-flags=${ encodeURIComponent(
+						enabledFeatureFlags.join( ',' )
+					) }`
+				);
+			}
+
 			// prettier-ignore
 			return `${ host }/create?${ query.join( '&' ).replace( /%(2F|5[BD])/g, m => decodeURIComponent( m ) ) }`;
 		}
@@ -246,15 +281,15 @@
 		/**
 		 * Build HTML for a single option checkbox.
 		 *
-		 * @param {object} opts - Options.
+		 * @param {Object}  opts            - Options.
-		 * @param {string} opts.label - Checkbox label HTML.
+		 * @param {string}  opts.label      - Checkbox label HTML.
-		 * @param {string} opts.name - Checkbox name.
+		 * @param {string}  opts.name       - Checkbox name.
-		 * @param {string} [opts.value] - Checkbox value, if any.
+		 * @param {string}  [opts.value]    - Checkbox value, if any.
-		 * @param {boolean} [opts.checked] - Whether the checkbox is default checked.
+		 * @param {boolean} [opts.checked]  - Whether the checkbox is default checked.
 		 * @param {boolean} [opts.disabled] - Whether the checkbox is disabled.
-		 * @param {boolean} [opts.invert] - Whether the sense of the checkbox is inverted.
+		 * @param {boolean} [opts.invert]   - Whether the sense of the checkbox is inverted.
-		 * @param {number} columnWidth - Column width.
+		 * @param {number}  columnWidth     - Column width.
-		 * @returns {string} HTML.
+		 * @return {string} HTML.
 		 */
 		function getOption(
 			{
@@ -281,9 +316,9 @@
 		/**
 		 * Build HTML for a set of option checkboxes.
 		 *
-		 * @param {object[]} options - Array of options for `getOption()`.
+		 * @param {object[]} options     - Array of options for `getOption()`.
-		 * @param {number} columnWidth - Column width.
+		 * @param {number}   columnWidth - Column width.
-		 * @returns {string} HTML.
+		 * @return {string} HTML.
 		 */
 		function getOptionsList( options, columnWidth ) {
 			return `
@@ -302,8 +337,8 @@
 		 *
 		 * Also registers `onInputChanged()` as a change handler for all checkboxes in the HTML.
 		 *
-		 * @param {HTMLElement} el - Element.
+		 * @param {HTMLElement} el       - Element.
-		 * @param {string} contents - HTML to append.
+		 * @param {string}      contents - HTML to append.
 		 */
 		function appendHtml( el, contents ) {
 			const $el = $( el );