Mobile Theme: do not display settings when module is inactive. (#14101)

* Mobile Theme: do not display settings when module is inactive. Fixes #13385 Fixes #7602 * Add mention of the future feature deprecation See discussion here: #14101 (comment) * Always display the Settings UI, but disable when module is off Also use standard notice component to display notice. * Add new optional className to SettingsGroup component * Dynamically set minileven card class based on module status * Add basic styling when the Mobile theme feature is inactive * Update wording as per iteration 3 * Add margin around notice, and transition when settings are greyed
Automattic · Dec 18, 2019 · a833d24 · a833d24
1 parent fdda550
commit a833d24
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 2 deletions.
diff --git a/_inc/client/components/settings-group/index.jsx b/_inc/client/components/settings-group/index.jsx
@@ -37,7 +37,7 @@ export const SettingsGroup = props => {
 	}
 
 	return (
-		<div className="jp-form-settings-group">
+		<div className={ classNames( 'jp-form-settings-group', props.className ) }>
 			<Card
 				className={ classNames( {
 					'jp-form-has-child': props.hasChild,
@@ -61,6 +61,7 @@ SettingsGroup.propTypes = {
 	userCanManageModules: PropTypes.bool.isRequired,
 	isLinked: PropTypes.bool.isRequired,
 	isUnavailableInDevMode: PropTypes.func.isRequired,
+	className: PropTypes.string,
 };
 
 SettingsGroup.defaultProps = {
@@ -72,6 +73,7 @@ SettingsGroup.defaultProps = {
 	userCanManageModules: false,
 	isLinked: false,
 	isUnavailableInDevMode: noop,
+	className: '',
 };
 
 export default connect( state => {

diff --git a/_inc/client/settings/style.scss b/_inc/client/settings/style.scss
@@ -25,3 +25,17 @@
 	box-shadow: none;
 	border: none;
 }
+
+/* Mobile Theme Card */
+.jp-form-settings-group.minileven {
+	.jp-form-settings-notice {
+		margin: 15px 0;
+	}
+
+	&.inactive {
+		p, .form-toggle__label {
+			color: $gray;
+			transition: all 0.75s;
+		}
+	}
+}
diff --git a/_inc/client/writing/theme-enhancements.jsx b/_inc/client/writing/theme-enhancements.jsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import React from 'react';
+import classNames from 'classnames';
 import { connect } from 'react-redux';
 import { translate as __ } from 'i18n-calypso';
 import CompactFormToggle from 'components/form/form-toggle/compact';
@@ -18,6 +19,7 @@ import { isModuleFound } from 'state/search';
 import { withModuleSettingsFormHelpers } from 'components/module-settings/with-module-settings-form-helpers';
 import SettingsCard from 'components/settings-card';
 import SettingsGroup from 'components/settings-group';
+import SimpleNotice from 'components/notice';
 import ModuleOverriddenBanner from 'components/module-overridden-banner';
 
 class ThemeEnhancements extends React.Component {
@@ -118,6 +120,14 @@ class ThemeEnhancements extends React.Component {
 		return () => this.updateOptions( optionName, module );
 	};
 
+	trackMinilevenLearnMore = () => {
+		analytics.tracks.recordJetpackClick( {
+			target: 'learn-more',
+			feature: 'minileven',
+			extra: 'deprecated-link',
+		} );
+	};
+
 	render() {
 		const foundInfiniteScroll = this.props.isModuleFound( 'infinite-scroll' ),
 			foundCustomCSS = this.props.isModuleFound( 'custom-css' ),
@@ -217,8 +227,37 @@ class ThemeEnhancements extends React.Component {
 							),
 							link: 'https://jetpack.com/support/mobile-theme',
 						} }
+						className={ classNames(
+							'minileven',
+							`${ isMinilevenActive ? `active` : `inactive` }`
+						) }
 					>
 						<FormLegend className="jp-form-label-wide">{ __( 'Mobile Theme' ) }</FormLegend>
+						<SimpleNotice
+							showDismiss={ false }
+							status="is-info"
+							className="jp-form-settings-notice"
+						>
+							{ __(
+								'{{b}}Note:{{/b}} This feature is being retired ' +
+									'and will be removed from Jetpack in March. ' +
+									'{{link}}Learn more{{/link}}',
+								{
+									components: {
+										b: <strong />,
+										link: (
+											<a
+												href="https://jetpack.com/support/mobile-theme/"
+												target="_blank"
+												rel="noopener noreferrer"
+												onClick={ this.trackMinilevenLearnMore }
+											/>
+										),
+									},
+									context: 'Link leads to a support document.',
+								}
+							) }
+						</SimpleNotice>
 						<p>
 							{ __(
 								'Give your site a fast-loading, streamlined look for mobile devices. Visitors will ' +
@@ -230,6 +269,7 @@ class ThemeEnhancements extends React.Component {
 							activated={ isMinilevenActive }
 							toggling={ this.props.isSavingAnyOption( minileven.module ) }
 							toggleModule={ this.props.toggleModuleNow }
+							disabled={ ! isMinilevenActive }
 						>
 							<span className="jp-form-toggle-explanation">{ minileven.description }</span>
 						</ModuleToggle>

diff --git a/class.jetpack-modules-list-table.php b/class.jetpack-modules-list-table.php
@@ -97,7 +97,7 @@ function js_templates() {
 			if ( data.items.length ) {
 			_.each( data.items, function( item, key, list ) {
 				if ( item === undefined ) return;
-				if ( 'pwa' == item.module && ! item.activated ) return;
+				if ( 'minileven' == item.module && ! item.activated ) return;
 				if ( 'manage' == item.module && item.activated ) return; #>
 				<tr class="jetpack-module <# if ( ++i % 2 ) { #> alternate<# } #><# if ( item.activated ) { #> active<# } #><# if ( ! item.available ) { #> unavailable<# } #>" id="{{{ item.module }}}">
 					<th scope="row" class="check-column">