Jetpack live branches: fix, simplify and refactor (#11761)

- Add more settings - Add more plugins - Remove GitHub's own class names from HTML; this was causing a fatal error in the page each time checkboxes were toggled - Wrap checkbox texts in the label to make them clickable - Tell linter that jQuery is a global variable - Change how the link is structured - Change how HTML is structured - Move link under the settings from above - Remove language repetition so it's easier to quickly see where is what ("launch with", "plugin" etc)
Automattic · Mar 31, 2019 · c569654 · c569654
1 parent 6af673c
commit c569654
Showing 1 changed file with 142 additions and 63 deletions.
diff --git a/tools/jetpack-live-branches/jetpack-live-branches.user.js b/tools/jetpack-live-branches/jetpack-live-branches.user.js
@@ -1,12 +1,14 @@
 // ==UserScript==
 // @name         Jetpack Live Branches
 // @namespace    https://wordpress.com/
-// @version      1.11
+// @version      1.12
 // @description  Adds links to PRs pointing to Jurassic Ninja sites for live-testing a changeset
 // @require      https://code.jquery.com/jquery-3.3.1.min.js
 // @match        https://github.com/Automattic/jetpack/pull/*
 // ==/UserScript==
 
+/* global jQuery */
+
 ( function() {
 	const $ = jQuery.noConflict();
 	doit();
@@ -19,81 +21,158 @@
 			$( '.gh-header-meta .State' )
 				.text()
 				.trim() === 'Merged';
-		const base = 'https://jurassic.ninja/create?';
-		const query = `jetpack-beta&branch=${ branch }&wp-debug-log`;
-		let link = base + query;
-		const canLiveTestText = `<div id="jetpack-live-branches">
-			<h2>Jetpack Live Branches</h2>
-			<p style="height:3em;" ><a id="jetpack-beta-branch-link" target="_blank" rel="nofollow noopener" href="${ link }">${ link }</a></p>
-			<ul>
-			<li class="task-list-item enabled"><input type="checkbox" name="shortlived" class="task-list-item-checkbox">Launch a shortlived site</li>
-			<li class="task-list-item enabled"><input type="checkbox" name="wp-debug-log" checked class="task-list-item-checkbox">Launch sites with WP_DEBUG and WP_DEBUG_LOG set to true</li>
-			<li class="task-list-item enabled"><input type="checkbox" name="gutenberg" class="task-list-item-checkbox">Launch with Gutenberg installed</li>
-			<li class="task-list-item enabled"><input type="checkbox" name="classic-editor" class="task-list-item-checkbox">Launch with Classic Editor plugin</li>
-			<li class="task-list-item enabled"><input type="checkbox" name="woocommerce" class="task-list-item-checkbox">Launch with WooCommerce installed</li>
-			<li class="task-list-item enabled"><input type="checkbox" name="code-snippets" class="task-list-item-checkbox">Launch with Code Snippets installed</li>
-			<li class="task-list-item enabled"><input type="checkbox" name="wp-rollback" class="task-list-item-checkbox">Launch with WP Rollback installed</li>
-			<li class="task-list-item enabled"><input type="checkbox" name="wp-downgrade" class="task-list-item-checkbox">Launch with WP Downgrade installed</li>
-			</ul>
-			</div>`;
-		const branchIsForkedText =
-			'<div id="jetpack-live-branches">' +
-			'<h2>Jetpack Live Branches</h2>' +
-			"<p><strong>This branch can't be tested live because it comes from a forked version of this repo.</p>" +
-			'</div>';
-		const branchIsMergedText =
-			'<div id="jetpack-live-branches">' +
-			'<h2>Jetpack Live Branches</h2>' +
-			'<p><strong>This branch is already merged.</p>' +
-			'</div>';
+
 		if ( ! branchIsForked && ! branchIsMerged ) {
-			appendHtml( markdownBody, canLiveTestText );
+			const link = getLink();
+			const contents = `
+				<h4>Settings</h4>
+				${ getOptionsList(
+					[
+						{
+							label: 'A shortlived site',
+							name: 'shortlived',
+						},
+						{
+							checked: true,
+							label: '<code>WP_DEBUG</code> and <code>WP_DEBUG_LOG</code> set to true',
+							name: 'wp-debug-log',
+						},
+						{
+							label: 'Multisite based on subdomains',
+							name: 'subdomain_multisite',
+						},
+						{
+							label: 'Multisite based on subdirectories',
+							name: 'subdir_multisite',
+						},
+						{
+							label: 'Pre-generate content',
+							name: 'content',
+						},
+						{
+							label: '<code>xmlrpc.php</code> unavailable',
+							name: 'blockxmlrpc',
+						},
+					],
+					100
+				) }
+				<h4>Plugins</h4>
+				${ getOptionsList(
+					[
+						{
+							label: 'WordPress Beta Tester',
+							name: 'wordpress-beta-tester',
+						},
+						{
+							label: 'Gutenberg',
+							name: 'gutenberg',
+						},
+						{
+							label: 'Classic Editor',
+							name: 'classic-editor',
+						},
+						{
+							label: 'WooCommerce',
+							name: 'woocommerce',
+						},
+						{
+							label: 'WooCommerce Beta Tester',
+							name: 'woocommerce-beta-tester',
+						},
+						{
+							label: 'Config Constants',
+							name: 'config-constants',
+						},
+						{
+							label: 'Code Snippets',
+							name: 'code-snippets',
+						},
+						{
+							label: 'WP Rollback',
+							name: 'wp-rollback',
+						},
+						{
+							label: 'WP Downgrade',
+							name: 'wp-downgrade',
+						},
+						{
+							label: 'WP Super Cache',
+							name: 'wp-super-cache',
+						},
+						{
+							label: 'WP Log Viewer',
+							name: 'wp-log-viewer',
+						},
+						{
+							label: 'WP Job Manager',
+							name: 'wp-job-manager',
+						},
+					],
+					33
+				) }
+				<p>
+					<a id="jetpack-beta-branch-link" target="_blank" rel="nofollow noopener" href="${ link }">
+						${ link }
+					</a>
+				</p>
+			`;
+			appendHtml( markdownBody, contents );
 		} else if ( ! branchIsMerged ) {
-			appendHtml( markdownBody, branchIsForkedText );
+			appendHtml(
+				markdownBody,
+				"<p><strong>This branch can't be tested live because it comes from a forked version of this repo.</strong></p>"
+			);
 		} else {
-			appendHtml( markdownBody, branchIsMergedText );
+			appendHtml( markdownBody, '<p><strong>This branch is already merged.</strong></p>' );
+		}
+
+		function getLink() {
+			const query = [ 'jetpack-beta', `branch=${ branch }` ];
+			$( '#jetpack-live-branches input[type=checkbox]:checked' ).each( ( i, input ) => {
+				query.push( input.name );
+			} );
+			return `https://jurassic.ninja/create?${ query.join( '&' ) }`;
+		}
+
+		function getOption( { checked = false, label, name }, columnWidth ) {
+			return `
+			<li style="min-width: ${ columnWidth }%">
+				<label style="font-weight: inherit; ">
+					<input type="checkbox" name="${ name }" ${ checked ? 'checked' : '' }>
+					${ label }
+				</label>
+			</li>
+			`;
 		}
 
-		function appendHtml( el, str ) {
-			const div = document.createElement( 'div' );
+		function getOptionsList( options, columnWidth ) {
+			return `
+				<ul style="list-style: none; padding-left: 0; display: flex; flex-wrap: wrap;">
+					${ options
+						.map( option => {
+							return getOption( option, columnWidth );
+						} )
+						.join( '' ) }
+				</ul>
+			`;
+		}
+
+		function appendHtml( el, contents ) {
 			const $el = $( el );
-			$( div ).append( str );
-			$el.append(
-				$( div )
-					.children()
-					.get( 0 )
+			const liveBranches = $( '<div id="jetpack-live-branches" />' ).append(
+				`<h2>Jetpack Live Branches</h2> ${ contents }`
 			);
-
+			$el.append( liveBranches );
 			$el.find( 'input[type=checkbox]' ).change( toggle );
 		}
 
 		function toggle( e ) {
 			e.stopPropagation();
 			e.preventDefault();
-			const $link = $( '#jetpack-beta-branch-link' );
-			const $this = $( this );
-			const name = $this.attr( 'name' );
-			const checked = $this.is( ':checked' );
-
-			const query_array = $link
-				.attr( 'href' )
-				.split( '?' )[ 1 ]
-				.split( '&' );
-
-			if ( checked ) {
-				query_array.push( name );
-				link = base + query_array.join( '&' );
-			} else {
-				link =
-					base +
-					query_array
-						.filter( function( item ) {
-							return item !== name;
-						} )
-						.join( '&' );
-			}
-			$link.attr( 'href', link );
-			$link.text( link );
+			const link = getLink();
+			$( '#jetpack-beta-branch-link' )
+				.attr( 'href', link )
+				.text( link );
 		}
 	}
 } )();