Add "Beta" badge in FPM toggle

assets/js/components/first-party-mode/FirstPartyModeToggle.js

@@ -25,7 +25,7 @@ import { useMount } from 'react-use';
 /**
  * WordPress dependencies
  */
-import { useCallback } from '@wordpress/element';
+import { Fragment, useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -34,6 +34,7 @@ import { __ } from '@wordpress/i18n';
 import { ProgressBar, Switch } from 'googlesitekit-components';
 import { useDispatch, useSelect } from 'googlesitekit-data';
 import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
+import Badge from '../Badge';
 import SubtleNotification from '../notifications/SubtleNotification';
 
 export default function FirstPartyModeToggle( { className } ) {
@@ -73,15 +74,23 @@ export default function FirstPartyModeToggle( { className } ) {
 				/>
 			) }
 			{ ! isLoading && (
-				<Switch
-					label={ __( 'First-party mode', 'google-site-kit' ) }
-					checked={
-						!! isFirstPartyModeEnabled && hasMetServerRequirements
-					}
-					disabled={ ! hasMetServerRequirements }
-					onClick={ handleClick }
-					hideLabel={ false }
-				/>
+				<Fragment>
+					<Switch
+						label={ __( 'First-party mode', 'google-site-kit' ) }
+						checked={
+							!! isFirstPartyModeEnabled &&
+							hasMetServerRequirements
+						}
+						disabled={ ! hasMetServerRequirements }
+						onClick={ handleClick }
+						hideLabel={ false }
+					/>
+					<Badge
+						className="googlesitekit-badge--beta"
+						hasLeftSpacing
+						label={ __( 'Beta', 'google-site-kit' ) }
+					/>
+				</Fragment>
 			) }
 			<p className="googlesitekit-module-settings-group__helper-text">
 				{ __(

assets/js/components/first-party-mode/FirstPartyModeToggle.test.js

@@ -228,4 +228,29 @@ describe( 'FirstPartyModeToggle', () => {
 			false
 		);
 	} );
+
+	it( 'should render a "Beta" badge', async () => {
+		fetchMock.getOnce( serverRequirementStatusEndpoint, {
+			body: {
+				isEnabled: null,
+				isFPMHealthy: true,
+				isScriptAccessEnabled: true,
+			},
+			status: 200,
+		} );
+
+		const { container, waitForRegistry } = render(
+			<FirstPartyModeToggle />,
+			{
+				registry,
+			}
+		);
+
+		await waitForRegistry();
+
+		const badgeElement = container.querySelector( '.googlesitekit-badge' );
+
+		expect( badgeElement ).toBeInTheDocument();
+		expect( badgeElement ).toHaveTextContent( 'Beta' );
+	} );
 } );

assets/js/components/first-party-mode/__snapshots__/FirstPartyModeToggle.test.js.snap

@@ -38,6 +38,11 @@ exports[`FirstPartyModeToggle should render in default state 1`] = `
     >
       First-party mode
     </label>
+    <span
+      class="googlesitekit-badge googlesitekit-badge--beta googlesitekit-badge--has-left-spacing"
+    >
+      Beta
+    </span>
     <p
       class="googlesitekit-module-settings-group__helper-text"
     >
@@ -86,6 +91,11 @@ exports[`FirstPartyModeToggle should render in disabled state if server requirem
     >
       First-party mode
     </label>
+    <span
+      class="googlesitekit-badge googlesitekit-badge--beta googlesitekit-badge--has-left-spacing"
+    >
+      Beta
+    </span>
     <p
       class="googlesitekit-module-settings-group__helper-text"
     >

assets/sass/components/global/_googlesitekit-first-party-mode-toggle.scss

@@ -31,5 +31,9 @@
 				padding: 14px $grid-gap-desktop;
 			}
 		}
+
+		.googlesitekit-badge {
+			margin-left: 6px;
+		}
 	}
 }