Immediately add/remove DevTools-related AMP admin menu items when setting updated

assets/src/settings-page/index.js

@@ -151,7 +151,7 @@ function Root( { appRoot } ) {
 	const [ focusedSection, setFocusedSection ] = useState( global.location.hash.replace( /^#/, '' ) );
 
 	const { hasOptionsChanges, fetchingOptions, saveOptions } = useContext( Options );
-	const { hasDeveloperToolsOptionChange, saveDeveloperToolsOption } = useContext( User );
+	const { hasDeveloperToolsOptionChange, saveDeveloperToolsOption, developerToolsOption } = useContext( User );
 	const { templateModeWasOverridden } = useContext( ReaderThemes );
 	const { isSkipped } = useContext( SiteScanContext );
 
@@ -161,13 +161,46 @@ function Root( { appRoot } ) {
 	const onSubmit = useCallback( ( event ) => {
 		event.preventDefault();
 
+		/*
+		 * Adds the developer tools 'Validated URLs' & 'Error Index' on turning ON
+		 * the 'Enable Developer Tools' toggle button and saving.
+		 */
+		const addAmpDevOptions = ( optionTitle, optionUrl ) => {
+			const wpAmpSettings = document.querySelector( '#toplevel_page_amp-options ul' );
+
+			if ( wpAmpSettings === null ) {
+				return;
+			}
+
+			const listElement = document.createElement( 'li' );
+			const anchorElement = document.createElement( 'a' );
+			anchorElement.innerText = optionTitle;
+			anchorElement.setAttribute( 'href', optionUrl );
+			listElement.appendChild( anchorElement );
+			wpAmpSettings.appendChild( listElement );
+		};
+
 		if ( hasOptionsChanges ) {
 			saveOptions();
 		}
+
 		if ( hasDeveloperToolsOptionChange ) {
 			saveDeveloperToolsOption();
+			/*
+			 * Add/Remove Dev Tools 'Validated URLs' & 'Error Index' on 'Enable Developer Tools' ON/OFF on save.
+			 */
+			if ( ! developerToolsOption ) {
+				document.querySelectorAll( '#toplevel_page_amp-options ul li a[href*="post_type=amp_validated_url"]' )
+					.forEach( ( menuItem ) => {
+						menuItem.parentNode.remove();
+					} );
+				return;
+			}
+
+			addAmpDevOptions( __( 'Validated URLs', 'amp' ), 'edit.php?post_type=amp_validated_url' );
+			addAmpDevOptions( __( 'Error Index', 'amp' ), 'edit-tags.php?taxonomy=amp_validation_error&post_type=amp_validated_url' );
 		}
-	}, [ hasDeveloperToolsOptionChange, hasOptionsChanges, saveDeveloperToolsOption, saveOptions ] );
+	}, [ hasDeveloperToolsOptionChange, hasOptionsChanges, saveDeveloperToolsOption, saveOptions, developerToolsOption ] );
 
 	/**
 	 * Scroll to the focused element on load or when it changes.

tests/e2e/specs/admin/anchor-linking.js

@@ -8,6 +8,8 @@ import { loginUser } from '@wordpress/e2e-test-utils';
  * Internal dependencies
  */
 import { visitAdminPageWithHash } from '../../utils/visit-admin-page-with-hash';
+import { cleanUpSettings, scrollToElement } from '../../utils/onboarding-wizard-utils';
+import { saveSettings } from '../../utils/amp-settings-utils';
 
 describe( 'AMP settings page anchor linking', () => {
 	beforeEach( async () => {
@@ -30,3 +32,46 @@ describe( 'AMP settings page anchor linking', () => {
 	} );
 } );
 
+describe( 'AMP developer tools settings', () => {
+	beforeEach( async () => {
+		await loginUser();
+		await visitAdminPageWithHash( 'admin.php', 'page=amp-options', 'other-settings' );
+	} );
+
+	afterEach( async () => {
+		await cleanUpSettings();
+	} );
+
+	it( 'enables developer tools', async ( ) => {
+		const fullSelector = `#other-settings .developer-tools .amp-setting-toggle input[type="checkbox"]`;
+
+		// Confirm the setting is initially enabled.
+		await expect( page ).toMatchElement( `${ fullSelector }:checked` );
+
+		const links = [ 'edit.php?post_type=amp_validated_url', 'edit-tags.php?taxonomy=amp_validation_error&post_type=amp_validated_url' ];
+
+		await Promise.all( links.map( ( link ) => {
+			return expect( page ).toMatchElement( `a[href$="${ link }"]` );
+		} ) );
+	} );
+
+	it( 'disables developer tools', async ( ) => {
+		const fullSelector = `#other-settings .developer-tools .amp-setting-toggle input[type="checkbox"]`;
+
+		// Confirm the setting is initially enabled.
+		await expect( page ).toMatchElement( `${ fullSelector }:checked` );
+
+		// Disable it
+		await scrollToElement( { selector: fullSelector, click: true } );
+		await expect( page ).toMatchElement( `${ fullSelector }:not(:checked)` );
+
+		const links = [ 'edit.php?post_type=amp_validated_url', 'edit-tags.php?taxonomy=amp_validation_error&post_type=amp_validated_url' ];
+
+		await saveSettings();
+
+		// Check after save.
+		await Promise.all( links.map( ( link ) => {
+			return expect( page ).not.toMatchElement( `a[href$="${ link }"]` );
+		} ) );
+	} );
+} );