File structure and components refactoring and test update

settings/package.json

@@ -27,7 +27,7 @@
 		"@wordpress/data": "^8.4.0",
 		"@wordpress/element": "^5.4.0",
 		"@wordpress/icons": "^9.18.0",
-		"@wordpress/scripts": "^24.6.0",
+		"@wordpress/scripts": "^25.0.0",
 		"lodash": "^4.17.21"
 	}
 }

settings/src/components/backup-codes.js

@@ -10,7 +10,7 @@ import { Icon, warning, cancelCircleFilled } from '@wordpress/icons';
  * Internal dependencies
  */
 import { GlobalContext } from '../script';
-import { refreshRecord } from '../utilities';
+import { refreshRecord } from '../utilities/common';
 
 /**
  * Setup and manage backup codes.

settings/src/components/revalidate-modal.js

@@ -5,15 +5,18 @@ import { useCallback, useContext, useEffect, useRef } from '@wordpress/element';
 import { GlobalContext } from '../script';
 import { Modal } from '@wordpress/components';
 import { useMergeRefs, useFocusableIframe } from '@wordpress/compose';
-import { refreshRecord } from '../utilities';
+import { refreshRecord } from '../utilities/common';
 
 export default function RevalidateModal() {
 	const { navigateToScreen } = useContext( GlobalContext );
 
-	const goBack = useCallback( ( event ) => {
-		event.preventDefault();
-		navigateToScreen( 'account-status' );
-	}, [] );
+	const goBack = useCallback(
+		( event ) => {
+			event.preventDefault();
+			navigateToScreen( 'account-status' );
+		},
+		[ navigateToScreen ]
+	);
 
 	return (
 		<Modal

settings/src/components/screen-link.js

@@ -23,10 +23,13 @@ export default function ScreenLink( { screen, anchorText, buttonStyle = false, a
 		classes.push( 'is-secondary' );
 	}
 
-	const onClick = useCallback( ( event ) => {
-		event.preventDefault();
-		navigateToScreen( screen );
-	}, [] );
+	const onClick = useCallback(
+		( event ) => {
+			event.preventDefault();
+			navigateToScreen( screen );
+		},
+		[ navigateToScreen ]
+	);
 
 	return (
 		<a

settings/src/components/screen-navigation.js

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { Icon, chevronLeft } from '@wordpress/icons';
+import { Card, CardHeader, CardBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ScreenLink from './screen-link';
+
+/**
+ * @param props
+ * @param props.children
+ * @param props.screen
+ */
+const ScreenNavigation = ( { screen, children } ) => (
+	<Card>
+		<CardHeader className="wporg-2fa__navigation" size="xSmall">
+			<ScreenLink
+				screen="account-status"
+				ariaLabel="Back to the account status page"
+				anchorText={
+					<>
+						<Icon icon={ chevronLeft } />
+						Back
+					</>
+				}
+			/>
+
+			<h3>
+				{ screen
+					.replace( '-', ' ' )
+					.replace( 'totp', 'Two-Factor Authentication' )
+					.replace( 'webauthn', 'Two-Factor Security Key' ) }
+			</h3>
+		</CardHeader>
+		<CardBody className={ 'wporg-2fa__' + screen }>{ children }</CardBody>
+	</Card>
+);
+
+export default ScreenNavigation;

settings/src/components/screen-navigation.scss

@@ -0,0 +1,22 @@
+.wporg-2fa__navigation {
+	padding: 24px 0 !important; /* Override Gutenberg auto-generated. */
+	justify-content: center !important;
+	position: relative;
+
+	a {
+		display: flex;
+    	align-items: center;
+		position: absolute;
+		left: 24px;
+	}
+
+	svg {
+		fill: #4ca6cf;
+	}
+
+	h3 {
+		margin: unset;
+		text-transform: capitalize;
+	}
+
+}

settings/src/components/totp.js

@@ -11,7 +11,7 @@ import { RawHTML, useCallback, useContext, useEffect, useRef, useState } from '@
  */
 import ScreenLink from './screen-link';
 import AutoTabbingInput from './auto-tabbing-input';
-import { refreshRecord } from '../utilities';
+import { refreshRecord } from '../utilities/common';
 import { GlobalContext } from '../script';
 
 export default function TOTP() {

settings/src/components/webauthn/list-keys.js

@@ -9,8 +9,7 @@ import { Icon, cancelCircleFilled } from '@wordpress/icons';
  * Internal dependencies
  */
 import { GlobalContext } from '../../script';
-import { refreshRecord } from '../../utilities';
-
+import { refreshRecord } from '../../utilities/common';
 /**
  * Render the list of keys.
  */

settings/src/components/webauthn/register-key.js

@@ -9,7 +9,7 @@ import { Icon, check, cancelCircleFilled } from '@wordpress/icons';
  * Internal dependencies
  */
 import { GlobalContext } from '../../script';
-import { refreshRecord } from '../../utilities';
+import { refreshRecord } from '../../utilities/common';
 import {
 	preparePublicKeyCreationOptions,
 	preparePublicKeyCredential,

settings/src/components/webauthn/webauthn.js

@@ -10,7 +10,7 @@ import apiFetch from '@wordpress/api-fetch';
  * Internal dependencies
  */
 import { GlobalContext } from '../../script';
-import { refreshRecord } from '../../utilities';
+import { refreshRecord } from '../../utilities/common';
 import ListKeys from './list-keys';
 import RegisterKey from './register-key';
 

settings/src/utilities.js → settings/src/hooks/useUser.js

@@ -29,24 +29,3 @@ export function useUser( userId ) {
 		webAuthnEnabled,
 	};
 }
-
-/**
- * Refresh a `useEntityRecord` object from the REST API.
- *
- * This is necessary after an the underlying data in the database has been changed by a method other than
- * `userRecord.save()`. When that happens, the `userRecord` object isn't automatically updated, and needs to be manually
- * refreshed to get the latest data.
- *
- * todo Replace this with native method if one is added in https://github.com/WordPress/gutenberg/issues/47746.
- *
- * @param  userRecord An userRecord object that was generated by `useEntityRecord()`.
- *
- * @return {Promise} A promise that resolves when the record has been refreshed.
- */
-export function refreshRecord( userRecord ) {
-	// The fake key will be ignored by the REST API because it isn't a registered field. But the request will still
-	// result in the latest data being returned.
-	userRecord.edit( { refreshRecordFakeKey: '' } );
-
-	return userRecord.save();
-}

settings/src/script.js

@@ -9,14 +9,13 @@ import {
 	useState,
 	createRoot,
 } from '@wordpress/element';
-import { Icon, chevronLeft } from '@wordpress/icons';
-import { Card, CardHeader, CardBody, Spinner } from '@wordpress/components';
+import { Spinner } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import { useUser } from './utilities';
-import ScreenLink from './components/screen-link';
+import { useUser } from './hooks/useUser';
+import ScreenNavigation from './components/screen-navigation';
 import AccountStatus from './components/account-status';
 import Password from './components/password';
 import EmailAddress from './components/email-address';
@@ -143,35 +142,12 @@ function Main( { userId } ) {
 		return <Spinner />;
 	}
 
-	const currentScreen = components[ screen ];
-	let screenContent = currentScreen;
-
-	if ( 'account-status' !== screen ) {
-		screenContent = (
-			<Card>
-				<CardHeader className="wporg-2fa__navigation" size="xSmall">
-					<ScreenLink
-						screen="account-status"
-						ariaLabel="Back to the account status page"
-						anchorText={
-							<>
-								<Icon icon={ chevronLeft } />
-								Back
-							</>
-						}
-					/>
-
-					<h3>
-						{ screen
-							.replace( '-', ' ' )
-							.replace( 'totp', 'Two-Factor Authentication' )
-							.replace( 'webauthn', 'Two-Factor Security Key' ) }
-					</h3>
-				</CardHeader>
-				<CardBody className={ 'wporg-2fa__' + screen }>{ currentScreen }</CardBody>
-			</Card>
+	const currentScreenComponent =
+		'account-status' === screen ? (
+			components[ screen ]
+		) : (
+			<ScreenNavigation screen={ screen }>{ components[ screen ] }</ScreenNavigation>
 		);
-	}
 
 	const isRevalidationExpired =
 		twoFactorRequiredScreens.includes( screen ) &&
@@ -185,7 +161,7 @@ function Main( { userId } ) {
 			value={ { navigateToScreen, user, setGlobalNotice, setError, error } }
 		>
 			<GlobalNotice notice={ globalNotice } setNotice={ setGlobalNotice } />
-			{ screenContent }
+			{ currentScreenComponent }
 			{ shouldRevalidate && <RevalidateModal /> }
 		</GlobalContext.Provider>
 	);

settings/src/style.scss

@@ -50,29 +50,6 @@ $alert-blue: #72aee6;
 	flex-wrap: wrap;
 }
 
-.wporg-2fa__navigation {
-	padding: 24px 0 !important; /* Override Gutenberg auto-generated. */
-	justify-content: center !important;
-	position: relative;
-
-	a {
-		display: flex;
-    	align-items: center;
-		position: absolute;
-		left: 24px;
-	}
-
-	svg {
-		fill: #4ca6cf;
-	}
-
-	h3 {
-		margin: unset;
-		text-transform: capitalize;
-	}
-
-}
-
 .wporg-2fa__token {
 	letter-spacing: .3em;
 }
@@ -105,5 +82,6 @@ $alert-blue: #72aee6;
 @import "components/setup-progress-bar";
 @import "components/global-notice";
 @import "components/screen-link";
+@import "components/screen-navigation";
 @import "components/auto-tabbing-input";
 @import "components/revalidate-modal";