Add reset options to my jetpack footer (#40943)

* Add option to reset jetpack options on My Jetpack footer for devs

* changelog

* Use additional menu items in admin page footer

* Use existing prop for jetpack footer

projects/js-packages/components/changelog/add-option-for-custom-footer-items

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Add option for additional custom footer elements

projects/js-packages/components/components/admin-page/index.tsx

@@ -28,6 +28,7 @@ const AdminPage: React.FC< AdminPageProps > = ( {
 	sandboxedDomain = '',
 	apiRoot = '',
 	apiNonce = '',
+	optionalMenuItems,
 	header,
 } ) => {
 	useEffect( () => {
@@ -85,7 +86,11 @@ const AdminPage: React.FC< AdminPageProps > = ( {
 			{ showFooter && (
 				<Container horizontalSpacing={ 5 }>
 					<Col>
-						<JetpackFooter moduleName={ moduleName } moduleNameHref={ moduleNameHref } />
+						<JetpackFooter
+							moduleName={ moduleName }
+							moduleNameHref={ moduleNameHref }
+							menu={ optionalMenuItems }
+						/>
 					</Col>
 				</Container>
 			) }

projects/js-packages/components/components/admin-page/types.ts

@@ -1,3 +1,5 @@
+import type { JetpackFooterMenuItem } from '../jetpack-footer/types';
+
 export type AdminPageProps = {
 	/**
 	 * The page content
@@ -53,4 +55,9 @@ export type AdminPageProps = {
 	 * The nonce of the API.
 	 */
 	apiNonce?: string;
+
+	/**
+	 * Optional menu items to be displayed
+	 */
+	optionalMenuItems?: JetpackFooterMenuItem[];
 };

projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx

@@ -11,6 +11,7 @@ import {
 	useBreakpointMatch,
 	ActionButton,
 } from '@automattic/jetpack-components';
+import { __, _x } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useContext, useEffect, useLayoutEffect, useState } from 'react';
 /*
@@ -27,6 +28,8 @@ import {
 import useEvaluationRecommendations from '../../data/evaluation-recommendations/use-evaluation-recommendations';
 import useSimpleQuery from '../../data/use-simple-query';
 import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
+import onKeyDownCallback from '../../data/utils/onKeyDownCallback';
+import resetJetpackOptions from '../../data/utils/reset-jetpack-options';
 import useWelcomeBanner from '../../data/welcome-banner/use-welcome-banner';
 import useAnalytics from '../../hooks/use-analytics';
 import useMyJetpackConnection from '../../hooks/use-my-jetpack-connection';
@@ -42,7 +45,6 @@ import styles from './styles.module.scss';
 
 const GlobalNotice = ( { message, title, options } ) => {
 	const { recordEvent } = useAnalytics();
-
 	useEffect( () => {
 		const tracksArgs = options?.tracksArgs || {};
 
@@ -84,13 +86,13 @@ export default function MyJetpackScreen() {
 		variation: 'control',
 	} );
 	useNotificationWatcher();
-	const { redBubbleAlerts } = getMyJetpackWindowInitialState();
 	const {
 		isAtomic = false,
 		jetpackManage = {},
 		adminUrl,
 		sandboxedDomain,
 	} = getMyJetpackWindowInitialState();
+	const { redBubbleAlerts, isDevVersion, userIsAdmin } = getMyJetpackWindowInitialState();
 
 	const { isWelcomeBannerVisible } = useWelcomeBanner();
 	const { isSectionVisible } = useEvaluationRecommendations();
@@ -140,12 +142,25 @@ export default function MyJetpackScreen() {
 		return null;
 	}
 
+	const resetOptionsMenuItem = {
+		label: _x(
+			'Reset Options (dev only)',
+			'Button for option to reset Jetpack Options',
+			'jetpack-my-jetpack'
+		),
+		title: __( 'Reset Options', 'jetpack-my-jetpack' ),
+		role: 'button',
+		onClick: () => resetJetpackOptions(),
+		onKeyDown: e => onKeyDownCallback( e, () => resetJetpackOptions() ),
+	};
+
 	return (
 		<AdminPage
 			siteAdminUrl={ adminUrl }
 			sandboxedDomain={ sandboxedDomain }
 			apiRoot={ apiRoot }
 			apiNonce={ apiNonce }
+			optionalMenuItems={ isDevVersion && userIsAdmin ? [ resetOptionsMenuItem ] : [] }
 		>
 			<hr className={ styles.separator } />
 

projects/packages/my-jetpack/_inc/data/utils/onKeyDownCallback.ts

@@ -0,0 +1,8 @@
+// Used to wrap a callback function in a keydown event listener to act as a button element would
+const onKeyDownCallback = ( event: KeyboardEvent, callback: () => void ) => {
+	if ( event.key === 'Enter' || event.key === ' ' ) {
+		callback();
+	}
+};
+
+export default onKeyDownCallback;

projects/packages/my-jetpack/_inc/data/utils/reset-jetpack-options.ts

@@ -0,0 +1,32 @@
+import restApi from '@automattic/jetpack-api';
+import { __ } from '@wordpress/i18n';
+import { getMyJetpackWindowRestState } from './get-my-jetpack-window-state';
+
+const resetJetpackOptions = async () => {
+	const { apiRoot, apiNonce } = getMyJetpackWindowRestState();
+	restApi.setApiRoot( apiRoot );
+	restApi.setApiNonce( apiNonce );
+
+	if (
+		// eslint-disable-next-line no-alert
+		window.confirm(
+			__( 'This will reset all Jetpack options, are you sure?', 'jetpack-my-jetpack' )
+		)
+	) {
+		try {
+			const res = await restApi.resetOptions( 'options' );
+
+			if ( res.code === 'success' ) {
+				// eslint-disable-next-line no-alert
+				window.alert(
+					__( 'Options reset! Have fun messing them up again :-)', 'jetpack-my-jetpack' )
+				);
+			}
+		} catch {
+			// eslint-disable-next-line no-alert
+			window.alert( __( 'Options failed to reset.', 'jetpack-my-jetpack' ) );
+		}
+	}
+};
+
+export default resetJetpackOptions;

projects/packages/my-jetpack/changelog/add-reset-options-to-my-jetpack-footer

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Add option for devs to reset jetpack options from My Jetpack footer

projects/packages/my-jetpack/global.d.ts

@@ -450,6 +450,7 @@ interface Window {
 		topJetpackMenuItemUrl: string;
 		isAtomic: boolean;
 		sandboxedDomain: string;
+		isDevVersion: boolean;
 		userIsAdmin: string;
 		userIsNewToJetpack: string;
 	};

projects/packages/my-jetpack/src/class-initializer.php

@@ -291,6 +291,7 @@ public static function enqueue_scripts() {
 				'isUserFromKnownHost'    => self::is_user_from_known_host(),
 				'isCommercial'           => self::is_commercial_site(),
 				'sandboxedDomain'        => JETPACK__SANDBOX_DOMAIN,
+				'isDevVersion'           => Jetpack::is_development_version(),
 				'isAtomic'               => ( new Status_Host() )->is_woa_site(),
 				'jetpackManage'          => array(
 					'isEnabled'       => Jetpack_Manage::could_use_jp_manage(),