From c52f99e2dd6d2aad229eb52e1fa901d1ccefcb23 Mon Sep 17 00:00:00 2001
From: Matthew Reishus <mreishus@users.noreply.github.com>
Date: Tue, 17 Nov 2020 17:58:58 -0600
Subject: [PATCH] Proof of Concept: Config Enable/Disable API

---
 client/config/index.js                    |  2 ++
 client/lib/create-config/index.js         | 14 ++++++++++
 client/my-sites/sidebar-unified/index.jsx | 31 +++++++++++++++++++++++
 3 files changed, 47 insertions(+)

diff --git a/client/config/index.js b/client/config/index.js
index 66bcd9a57b025..6323406e6eda0 100644
--- a/client/config/index.js
+++ b/client/config/index.js
@@ -73,3 +73,5 @@ const configApi = createConfig( configData );
 
 export default configApi;
 export const isEnabled = configApi.isEnabled;
+export const enable = configApi.enable;
+export const disable = configApi.disable;
diff --git a/client/lib/create-config/index.js b/client/lib/create-config/index.js
index 37422582e2e52..a7add4cb429fa 100644
--- a/client/lib/create-config/index.js
+++ b/client/lib/create-config/index.js
@@ -66,9 +66,23 @@ const config = ( data ) => ( key ) => {
 const isEnabled = ( data ) => ( feature ) =>
 	( data.features && !! data.features[ feature ] ) || false;
 
+const enable = ( data ) => ( feature ) => {
+	if ( data.features ) {
+		data.features[ feature ] = true;
+	}
+};
+
+const disable = ( data ) => ( feature ) => {
+	if ( data.features ) {
+		data.features[ feature ] = false;
+	}
+};
+
 module.exports = ( data ) => {
 	const configApi = config( data );
 	configApi.isEnabled = isEnabled( data );
+	configApi.enable = enable( data );
+	configApi.disable = disable( data );
 
 	return configApi;
 };
diff --git a/client/my-sites/sidebar-unified/index.jsx b/client/my-sites/sidebar-unified/index.jsx
index 1ec51b739e198..94f6dc4d35d56 100644
--- a/client/my-sites/sidebar-unified/index.jsx
+++ b/client/my-sites/sidebar-unified/index.jsx
@@ -12,6 +12,7 @@
  */
 import React from 'react';
 import { useSelector } from 'react-redux';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -30,8 +31,10 @@ import Spinner from 'calypso/components/spinner';
 import { itemLinkMatches } from '../sidebar/utils';
 import { getSidebarIsCollapsed } from 'calypso/state/ui/selectors';
 import './style.scss';
+import config from 'calypso/config';
 
 export const MySitesSidebarUnified = ( { path } ) => {
+	const [ renderCount, setRenderCount ] = useState( 0 );
 	const menuItems = useSiteMenuItems();
 	const isAllDomainsView = useDomainsViewStatus();
 	const isRequestingMenu = useSelector( getIsRequestingAdminMenu );
@@ -75,6 +78,34 @@ export const MySitesSidebarUnified = ( { path } ) => {
 				return <MySitesSidebarUnifiedItem key={ item.slug } selected={ isSelected } { ...item } />;
 			} ) }
 			<CollapseSidebar key="collapse" title="Collapse menu" icon="dashicons-admin-collapse" />
+			<li>
+				Feature "foo" is: { config.isEnabled( 'foo' ) ? 'ON' : 'OFF' }
+				<br />
+				<span
+					role="link"
+					tabIndex={ -10 }
+					onKeyDown={ () => setRenderCount( renderCount + 1 ) /* Pass accessibility lint */ }
+					onClick={ () => {
+						config.enable( 'foo' );
+						setRenderCount( renderCount + 1 ); // Force Rerender, since config changes don't
+					} }
+				>
+					Click to Enable
+				</span>
+				<br />
+				<span
+					role="link"
+					tabIndex={ -11 }
+					onKeyDown={ () => setRenderCount( renderCount + 1 ) }
+					onClick={ () => {
+						config.disable( 'foo' );
+						setRenderCount( renderCount + 1 ); // Force Rerender, since config changes don't
+					} }
+				>
+					Click to Disable
+				</span>
+				<br />
+			</li>
 		</Sidebar>
 	);
 };