Update Settings page to include "Other" section

assets/src/components/dev-tools-toggle/index.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { AMPSettingToggle } from '../amp-setting-toggle';
+import { User } from '../user-context-provider';
+import { Loading } from '../loading';
+
+export function DevToolsToggle() {
+	const {
+		developerToolsOption,
+		fetchingUser,
+		setDeveloperToolsOption,
+	} = useContext( User );
+
+	if ( fetchingUser ) {
+		return <Loading />;
+	}
+
+	return (
+		<AMPSettingToggle
+			checked={ true === developerToolsOption }
+			title={ __( 'Enable Developer Tools', 'amp' ) }
+			onChange={ () => {
+				setDeveloperToolsOption( ! developerToolsOption );
+			} }
+		/>
+	);
+}

assets/src/components/dev-tools-toggle/test/index.js

@@ -0,0 +1,90 @@
+/**
+ * External dependencies
+ */
+import { act } from 'react-dom/test-utils';
+import { create } from 'react-test-renderer';
+
+/**
+ * WordPress dependencies
+ */
+import { render } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { DevToolsToggle } from '../';
+import { UserContextProvider } from '../../user-context-provider';
+
+jest.mock( '../../user-context-provider' );
+
+let container;
+
+describe( 'DevToolsToggle', () => {
+	beforeEach( () => {
+		container = document.createElement( 'div' );
+		document.body.appendChild( container );
+	} );
+
+	afterEach( () => {
+		document.body.removeChild( container );
+		container = null;
+	} );
+
+	it( 'matches snapshot', () => {
+		const wrapper = create(
+			<UserContextProvider>
+				<DevToolsToggle />
+			</UserContextProvider>,
+		);
+		expect( wrapper.toJSON() ).toMatchSnapshot();
+	} );
+
+	it( 'renders a loading spinner when a user data is fetched', () => {
+		act( () => {
+			render(
+				<UserContextProvider fetchingUser={ true }>
+					<DevToolsToggle />
+				</UserContextProvider>,
+				container,
+			);
+		} );
+		expect( container.querySelector( '.amp-spinner-container' ) ).not.toBeNull();
+	} );
+
+	it( 'matches snapshot for the loading state', () => {
+		const wrapper = create(
+			<UserContextProvider fetchingUser={ true }>
+				<DevToolsToggle />
+			</UserContextProvider>,
+		);
+		expect( wrapper.toJSON() ).toMatchSnapshot();
+	} );
+
+	it( 'can be toggled', () => {
+		act( () => {
+			render(
+				<UserContextProvider>
+					<DevToolsToggle />
+				</UserContextProvider>,
+				container,
+			);
+		} );
+		expect( container.querySelector( 'input:checked' ) ).toBeNull();
+
+		act(
+			() => {
+				container.querySelector( 'input' ).dispatchEvent( new global.MouseEvent( 'click' ) );
+			},
+		);
+
+		expect( container.querySelector( 'input:checked' ) ).not.toBeNull();
+
+		act(
+			() => {
+				container.querySelector( 'input' ).dispatchEvent( new global.MouseEvent( 'click' ) );
+			},
+		);
+
+		expect( container.querySelector( 'input:checked' ) ).toBeNull();
+	} );
+} );

assets/src/components/redirect-toggle/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import PropTypes from 'prop-types';
-
 /**
  * WordPress dependencies
  */
@@ -15,23 +10,18 @@ import { __ } from '@wordpress/i18n';
 import { Options } from '../options-context-provider';
 import { AMPSettingToggle } from '../amp-setting-toggle';
 
-export function RedirectToggle( { direction = 'bottom' } ) {
+export function RedirectToggle() {
 	const { editedOptions, updateOptions } = useContext( Options );
 
 	const { mobile_redirect: mobileRedirect } = editedOptions;
 
 	return (
-		<div className={ `selectable selectable--${ direction }` }>
-			<AMPSettingToggle
-				checked={ true === mobileRedirect }
-				title={ __( 'Redirect mobile visitors to AMP', 'amp' ) }
-				onChange={ () => {
-					updateOptions( { mobile_redirect: ! mobileRedirect } );
-				} }
-			/>
-		</div>
+		<AMPSettingToggle
+			checked={ true === mobileRedirect }
+			title={ __( 'Redirect mobile visitors to AMP', 'amp' ) }
+			onChange={ () => {
+				updateOptions( { mobile_redirect: ! mobileRedirect } );
+			} }
+		/>
 	);
 }
-RedirectToggle.propTypes = {
-	direction: PropTypes.oneOf( [ 'bottom', 'left' ] ),
-};

assets/src/components/unsaved-changes-warning/index.js

@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { User } from '../../onboarding-wizard/components/user-context-provider';
+import { User } from '../user-context-provider';
 import { Options } from '../options-context-provider';
 
 /**

assets/src/onboarding-wizard/components/__mocks__/user-context-provider.js → assets/src/components/user-context-provider/__mocks__/index.js

@@ -13,14 +13,16 @@ export const User = createContext();
 /**
  * MOCK.
  *
- * @param {Object} props
- * @param {any}    props.children
+ * @param {Object}  props
+ * @param {any}     props.children
+ * @param {boolean} props.fetchingUser
  */
-export function UserContextProvider( { children } ) {
+export function UserContextProvider( { children, fetchingUser } ) {
 	return (
 		<User.Provider value={
 			{
 				savingDeveloperToolsOption: false,
+				fetchingUser,
 			}
 		}>
 			{ children }
@@ -29,4 +31,5 @@ export function UserContextProvider( { children } ) {
 }
 UserContextProvider.propTypes = {
 	children: PropTypes.any,
+	fetchingUser: PropTypes.bool,
 };