Nav Unification: uses experiment to set a feature flag

client/config/README.md

@@ -25,6 +25,25 @@ if ( config.isEnabled( 'myFeature' ) ) {
 }
 ```
 
+### config.enable( key )
+
+Enable a feature.
+
+```js
+import config from 'calypso/config';
+
+config.enable( 'myFeature' );
+```
+### config.disable( key )
+
+Disable a feature.
+
+```js
+import config from 'calypso/config';
+
+config.disable( 'myFeature' );
+```
+
 The key should always be a literal string not a variable so that down the road
 we can process the compiled scripts and remove code for disabled features in
 production.

client/config/index.js

@@ -74,3 +74,5 @@ const configApi = createConfig( configData );
 export default configApi;
 export const isEnabled = configApi.isEnabled;
 export const enabledFeatures = configApi.enabledFeatures;
+export const enable = configApi.enable;
+export const disable = configApi.disable;

client/layout/index.jsx

@@ -43,6 +43,8 @@ import { getCurrentOAuth2Client } from 'calypso/state/oauth2-clients/ui/selector
 import LayoutLoader from './loader';
 import wooDnaConfig from 'calypso/jetpack-connect/woo-dna-config';
 import { withCurrentRoute } from 'calypso/components/route';
+import QueryExperiments from 'calypso/components/data/query-experiments';
+import { getVariationForUser } from 'calypso/state/experiments/selectors';
 
 /**
  * Style dependencies
@@ -80,6 +82,8 @@ class Layout extends Component {
 					.classList.add( `is-${ this.props.colorSchemePreference }` );
 			}
 		}
+
+		// This code should be removed when the nav-unification project has been rolled out to 100% of the customers.
 		if ( config.isEnabled( 'nav-unification' ) ) {
 			window.addEventListener( 'scroll', scrollCallback );
 			window.addEventListener( 'resize', scrollCallback );
@@ -158,7 +162,7 @@ class Layout extends Component {
 				config.isEnabled( 'woocommerce/onboarding-oauth' ) &&
 				isWooOAuth2Client( this.props.oauth2Client ) &&
 				this.props.wccomFrom,
-			'is-nav-unification': config.isEnabled( 'nav-unification' ),
+			'is-nav-unification': this.props.navUnificationVariation === 'treatment',
 		} );
 
 		const optionalBodyProps = () => {
@@ -171,9 +175,16 @@ class Layout extends Component {
 			return optionalProps;
 		};
 
+		if ( this.props.navUnificationVariation === 'treatment' ) {
+			config.enable( 'nav-unification' );
+		} else {
+			config.disable( 'nav-unification' );
+		}
+
 		const { shouldShowAppBanner } = this.props;
 		return (
 			<div className={ sectionClass }>
+				<QueryExperiments />
 				<BodySectionCssClass
 					group={ this.props.sectionGroup }
 					section={ this.props.sectionName }
@@ -314,6 +325,7 @@ export default compose(
 			shouldQueryAllSites: currentRoute && currentRoute !== '/jetpack/connect/authorize',
 			isNewLaunchFlow,
 			isCheckoutFromGutenboarding,
+			navUnificationVariation: getVariationForUser( state, 'nav_unification' ),
 		};
 	} )
 )( Layout );

client/lib/create-config/index.js

@@ -74,10 +74,37 @@ const isEnabled = ( data ) => ( /** @type {string} */ feature ) =>
 const enabledFeatures = ( data ) => () =>
 	Object.keys( data.features ).filter( ( feature ) => !! data.features[ feature ] );
 
+/**
+ * Enables a specific feature.
+ *
+ * @param {object} data the json environment configuration to use for getting config values
+ * @public
+ */
+const enable = ( data ) => ( /** @type {string} */ feature ) => {
+	if ( data.features ) {
+		data.features[ feature ] = true;
+	}
+};
+
+/**
+ * Disables a specific feature.
+ *
+ * @param {object} data the json environment configuration to use for getting config values
+ * @public
+ */
+
+const disable = ( data ) => ( /** @type {string} */ feature ) => {
+	if ( data.features ) {
+		data.features[ feature ] = false;
+	}
+};
+
 module.exports = ( data ) => {
 	const configApi = config( data );
 	configApi.isEnabled = isEnabled( data );
 	configApi.enabledFeatures = enabledFeatures( data );
+	configApi.enable = enable( data );
+	configApi.disable = disable( data );
 
 	return configApi;
 };

client/lib/create-config/test/index.js

@@ -71,4 +71,64 @@ describe( 'index', () => {
 			} );
 		} );
 	} );
+
+	describe( 'config utilities', () => {
+		let config;
+
+		beforeEach( () => {
+			config = createConfig( {
+				features: {
+					flagA: false,
+					flagB: false,
+					flagC: true,
+				},
+			} );
+		} );
+
+		afterEach( () => {
+			config = null;
+		} );
+
+		describe( 'isEnabled', () => {
+			test( 'it correctly reports status of features', () => {
+				expect( config.isEnabled( 'flagA' ) ).to.be.false;
+				expect( config.isEnabled( 'flagC' ) ).to.be.true;
+			} );
+
+			test( 'it defaults to "false" when feature is not defined', () => {
+				expect( config.isEnabled( 'flagXYZ' ) ).to.be.false;
+			} );
+		} );
+
+		describe( 'enable', () => {
+			test( 'it can enable features which are not yet set', () => {
+				config.enable( 'flagD' );
+				config.enable( 'flagE' );
+				expect( config.isEnabled( 'flagD' ) ).to.be.true;
+				expect( config.isEnabled( 'flagE' ) ).to.be.true;
+			} );
+
+			test( 'it can toggle existing features to enable them', () => {
+				config.enable( 'flagA' );
+				expect( config.isEnabled( 'flagA' ) ).to.be.true;
+			} );
+		} );
+
+		describe( 'disable', () => {
+			test( 'it can toggle existing features to disable them', () => {
+				config.disable( 'flagC' );
+				expect( config.isEnabled( 'flagC' ) ).to.be.false;
+			} );
+
+			test( 'it retains existing disable setting for features that are already disabled', () => {
+				config.disable( 'flagA' );
+				expect( config.isEnabled( 'flagA' ) ).to.be.false;
+			} );
+
+			test( 'it will handle setting new features to a initial disabled state', () => {
+				config.disable( 'flagZXY' );
+				expect( config.isEnabled( 'flagZXY' ) ).to.be.false;
+			} );
+		} );
+	} );
 } );